2016-08-11 54 views
1

我該如何自動滑動? 我已經做到了,所以你可以手動滑動它們,但我希望它們在同一時間移動。如何將JS添加到此代碼中,以便它自動滑動?

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 

    if (n > slides.length) { 
     slideIndex = 1 
    } 
    if (n < 1) { 
     slideIndex = slides.length 
    } 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
} 
}; 
+0

你能把這個放在工作[小提琴](https://jsfiddle.net/)嗎? – wahwahwah

回答

0

您可以使用下面的代碼使其工作。

var slideIndex = 1; 
    $(function() { 
     automaticSlider(); 
    }) 

    function automaticSlider() { 
     showSlides(slideIndex); 
     setInterval(function() { automaticSlider(); }, 1000) // 1000 is 1 sec before calling next slide. 
    } 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 

    if (n > slides.length) { 
     slideIndex = 1 
    } 
    if (n < 1) { 
     slideIndex = slides.length 
    } 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
} 
}; 

調用函數automaticSlider()在載荷,然後設置間隔是稱之爲automaticSlider()函數1秒後。你可以根據你的說服來增加時間。

+0

在您的示例中'slideIndex'未被發現,並且索引不會遞增或遞減。 – empiric

+0

到目前爲止還沒有添加完整的代碼,但現在是!更新了代碼。 –

+0

謝謝! @nalinaggarwal – Valeriadg

相關問題