如何使用jQuery实现自动和手动滑块,以及如何在悬停时暂停滑块

时间:2018-10-07 13:34:02

标签: javascript jquery css

我同时实现了自动和手动图像滑块。但我也想暂停悬停时的自动滑动。我怎样才能做到这一点。这是代码片段。除了jQuery,没有其他外部库。

var slideIndex = 0;
  var slides = document.getElementsByClassName("mySlides");

showSlides();

function showSlides() {    
    var i;    
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 5000); // Change image every 5 seconds
}

function currentSlide(no) {
    var i;    
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex = no;
    slides[no-1].style.display = "block";
}

function plusSlides(n) {
  var newslideIndex = slideIndex + n;
  if(newslideIndex < 4 && newslideIndex > 0){
     currentSlide(newslideIndex);
  }
}

0 个答案:

没有答案