Слайд-шоу Javascript
Привет, у меня на моем веб-сайте запущен javascript для слайд-шоу, но он не работает должным образом, когда я меняю изображения вперед и назад, а изображение не отображается автоматически. 6. Может ли кто-нибудь помочь мне написать это, потому что я был пробовал больше месяца и ни к чему не привел. https://wbd-ownwork-13--15nalaas.repl.co/
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
Вам нужно добавить соответствующий код к вашему вопросу. Ссылки на ваш сайт не подходят для вопросов о переполнении стека.
Вы никогда не используете clearTimeout, поэтому с каждым щелчком вы создаете новый тайм-аут, который независимо продвигает слайд-шоу. slideIndex объявлен дважды и используется непоследовательно. Почему бы не использовать 0 во всем коде?
@Xufox, как я могу это сделать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, вам не нужно добавлять настраиваемые элементы управления для смены слайдов, потому что слайд-шоу более чем достаточно. И во-вторых, вам нужно изменить весь скрипт на данный скрипт только тогда, когда он будет работать, потому что остальная часть вашего скрипта возится со слайд-шоу.
Измените весь скрипт со строки 94 на строку 125 в вашем HTML на это -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if (slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
Если проблема не исчезла, спросите еще раз.
извините за поздний ответ, и он отлично работает, спасибо
измените изображения, используя галерею на главной странице, и посмотрите, как все стринги испорчены.