|
Сообщение от amigru
|
|
я попросила помощи и помочь найти ошибку и указать на нее, а не слушать, что там ошибка
|
Ну так перечислять то .... функция next.onclick=function () { не закрыта, нет закрывающий фигурной скобки. Но это может быть и ошибка при копировании. Кстати код нужно форматировать - все что вложено в функцию нужно писать с отступом, иначе ведь код читать сложно.
Потом как вы пытаетесь получить кнопки управления? Они у вас с классами "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>
Мадам, вы студент, значит надо учиться или вам задают то, чего в программе обучения вообще нет?
