Автоматическое слайд-шоу не останавливается, когда я использую событие javascript

Я написал сценарий, чтобы сделать автоматическое слайд-шоу, и я хочу, чтобы он остановился, когда я нахожу (или на нем) изображение (или контент), но оно не работает для меня. Кто-нибудь, пожалуйста, покажите мне, есть ли какие-либо ошибки в моем коде. Спасибо!Автоматическое слайд-шоу не останавливается, когда я использую событие javascript

Это мой код:

var slideIndex =1; 
 
showslides(slideIndex); 
 
function plusslide(n){ 
 
\t showslides(slideIndex+=n); 
 
}; 
 
function showslides(n){ 
 
\t var i; 
 
\t var slides = document.getElementsByClassName("fade"); 
 
\t if (n>slides.length){ slideIndex=1}; 
 
\t if(n<1){slideIndex=slides.length}; 
 
\t for (i=0; i<slides.length; i++){ 
 
\t \t slides[i].style.display = "none"; 
 
\t } 
 
\t slides[slideIndex-1].style.display = "block"; 
 
}; 
 

 
var interval=setInterval(function(){slideIndex+=1; showslides(slideIndex);},1000); 
 
document.getElementsByClassName("fade").onclick=function(){stop()}; 
 
function stop(){ 
 
\t clearInterval(interval); 
 
};

<body> 
 
\t <div class="page"> 
 
\t \t <div class="container"> 
 
\t \t <div class="content"> 
 
\t \t \t <div class="fade"> 
 
\t \t \t \t <img src="#" /> 
 
\t \t \t \t <p>1/3</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="fade"> 
 
\t \t \t \t <img src="#" /> 
 
\t \t \t \t <p>2/3</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="fade"> 
 
\t \t \t \t <img src="#" /> 
 
\t \t \t \t <p>3/3</p> 
 
\t \t \t </div> 
 
\t \t \t \t <a class="prev" onclick="plusslide(-1)">&#10094;</a> 
 
\t \t \t \t <a class="next" onclick="plusslide(1)">&#10095;</a> \t 
 
\t \t </div> 
 
\t  </div> 
 
\t </div> 
 
\t <script type="text/javascript" src="slide.js"></script> 
 
</body>

источник

2016-08-27 Rain

Там небольшая опечатка в коде. Заменить getElementsbyClassName на getElementsByClassName.

Вы можете поймать ошибки, подобные этому, в будущем, используя консоль разработчика вашего браузера, где она сообщит вам, где ошибка в вашем коде и какой тип. Просто найдите Инструменты разработчика, это поможет вам найти и исправить ошибки, подобные этому самостоятельно.

Edit:

Ах да, не видел, что один. На самом деле также имеется ошибка в этой строке:

document.getElementsByClassName("fade").onclick=function(){stop()};

Вот проблема. getElementsByClassName не возвращает элемент DOM, а представляет собой массив элементов, так как существует несколько элементов с этим именем класса. Вы должны будете проходным каждого, чтобы получить доступ onclick на них, так же, как вы делали в вашей функции выше, как это:

var slides = document.getElementsByClassName("fade"); 
for (var i = 0; i < slides.length; i++) { 
    slides[i].onclick = stop; 
}

Кроме того, небольшой заметка на полях: Я укоротить function(){stop()} просто stop в моем ответе , Поскольку вы вызываете эту функцию только без каких-либо аргументов в onclick, вы можете просто напрямую привязать stop to onclick.

источник

2016-08-27 16:52:38

Спасибо за ваш ответ и ваш совет, я попробую инструменты разработчика. Я исправляю это, но он все еще не работает. Если я удалю код document.getElementsByClassName («fade»). Onclick = function() {stop()} и дать «onclick» для класса в html, он отлично работает, поэтому я уверен, что проблема в этой строке но все еще не знаю почему ( – Rain

Да, наконец, он работает. Я думал, что вы забыли «()», поэтому я добавил это, и это не сработало. Только что начал с html/css/js, и они меня иногда путают . Большое спасибо за вашу помощь! – Rain

Автоматическое слайд-шоу не останавливается, когда я использую событие javascript

ответ

Смежные вопросы