Да, к сожалению трудно. Если не было так трудно, не просила бы помощи. И я попросила помощи и помочь найти ошибку и указать на нее, а не слушать, что там ошибка. В случае отсутствия ошибки все бы работало. На том сайте часть классов идет со знаками доллара. Даже скопировав все так как есть в трех файлах, оно не заработало. Я этим занимаюсь месяц и мне сложно понять работу скрипта.
|
Цитата:
Потом как вы пытаетесь получить кнопки управления? Они у вас с классами "prev" и "next", а вы хотите достучаться к ним по селекторам querySelector('.prev .diy-slideshow') и querySelector('.next .diy-slideshow') соответственно, а это означает найти в элементах классов "prev" и "next" элементы с классом "diy-slideshow". Ну разве такие есть у вас? Параметры методов querySelector/querySelectorAll описываются согласно CSS селекторам, надо было просто прочесть об этом. Ничего сложного в этом нет. Есть символы, которые нельзя как есть вставлять в HTML, это < > &, иначе могут быть неприятности, их обязательно заменяют html-сущностями. Но самое главное, это не понять чего же вам надо? Если вам дали ссылку, то для чего - разрешено списать код заменив слегка имена переменных или руководствуясь кодом написать свое? Ну если свое, то можно и так написать:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
figure {
width: 400px;
background-color: #000;
text-align: center;
padding: 15px;
margin: 0 auto 5px auto;
color: #fff;
}
figure:not(.show) {
display: none;
}
figure img {
height: 200px;
width: auto;
}
.control {
width: 430px;
margin: 0 auto;
}
.control span {
font-size: 1.5em;
cursor: pointer;
}
.control span:last-child {
float: right;
}
</style>
</head>
<body>
<div class="diy-slideshow">
<figure class="show">
<img src="https://cdn.pixabay.com/photo/2017/06/21/13/37/lizard-2427248__340.jpg"><div class="description">Tortoise in the sea</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/26/12/49/red-wine-2443699__340.jpg"><div class="description">Seashells</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189__340.jpg"><div class="description">Beatiful beach</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855__340.jpg"><div class="description">Wonderful sunrice</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/24/23/41/beer-2439237__340.jpg"><div class="description">Quay</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2016/03/09/15/29/eagle-1246681__340.jpg"><div class="description">Amazing sunrice on the lake</div>
</figure>
</div>
<div class="control">
<span data-direct="-1">«</span>
<span data-direct="1">»</span>
</div>
<script>
var counter = 0,
items = document.querySelectorAll('.diy-slideshow figure');
[].forEach.call(document.querySelectorAll('div.control span'), function(e) {
e.addEventListener('click', function() {
items[counter].classList.remove('show');
counter += +this.getAttribute('data-direct');
counter = counter < 0 ? items.length - 1 : counter == items.length ? 0 : counter;
items[counter].classList.add('show');
}, false);
});
</script>
</body>
</html>
Мадам, вы студент, значит надо учиться или вам задают то, чего в программе обучения вообще нет? :) |
Спасибо огромное! Вечером попытаюсь разобраться. Программу прохожу по вебинару,html,css объяснили (так, что остальное смогла понять через интернет), а вот JS объяснили плохо. А проект дали: создать свою веб страницу (внутри еще 5 страниц). Одна страница вообще неполучилась (разницу между removeListener и switch непонятна (нужно чтобы в случае когда мышка на объекте менялся текст на другой,а вслучае когда ее там нет оставался текст который изначально и это требуеться сделать именно через JS, хоть через CSS это у меня получается) надеюсь препод не забьет и объяснит хоть когда-нибудь). :( .
В ссылке которую дали, функции которых вообще не было на курсе. А остальное пыталась понять через обучалку https://www.youtube.com/watch?v=-2WiaSvOj78&t=4842s В итоге у меня куча картинок вертикально. Если бы с той ссылки все работало как надо, то я бы была рада. С кодом по ссылке в console.log подсвечивает красным после второй функции красным, пишет что такой функции нет (это я напоминаю,я скопировала все прямиком с сайта). На W3 сайте слайдеры вообще не понятные для моего разума. Спасибо еще раз. |
amigru,
хотите научится вязать спицами (если не можете)? Тогда можно смотреть мультики на ютюбе. ;) А изучать веб аспекты программирования лучше по книгам хорошим или в "твердом переплете" (если прилагаются CD с примерами/проектами вообще шик), или онлайн: https://developer.mozilla.org/ru/ https://developer.mozilla.org/ru/docs/Learn https://developer.mozilla.org/ru/doc...d_with_the_web https://developer.mozilla.org/ru/docs/Learn/HTML https://developer.mozilla.org/ru/docs/Learn/CSS https://developer.mozilla.org/ru/docs/Learn/JavaScript Учебник по JS есть и на форуме, не полный конечно, но и "не сухим языком" написан. |
Я нашла причину своих неудачь. Код скрипта был в начале, причем в head (остальные страницы работают так ), а не в конце перед /body, поняла это по командам в console.log.
Насчет querySelector и взаимодействий с CSS на курсе не было сказано,спасибо за разъяснение. На курсе также плохо объяснили способ external, так как показывали только internal. Еще раз спасибо за помощь, буду дальше разбираться с addListener :) |
Цитата:
|
| Часовой пояс GMT +3, время: 22:18. |