如何使用jQuery循環播放幻燈片

Question

基本上我試圖用jquery創建幻燈片。這裏的幻燈片導航工作正常，但幻燈片循環無法正常工作。
我在這裏想我jsfiddle
我的腳本是：

var currIndex = -1; 

function slideshow(slideshowId){ 
    var len=$("ul#"+slideshowId+" li.slides").length; 
    currIndex = (currIndex + 1) % len; 
    $("ul#"+slideshowId+" li.slides").hide(); 
    $("ul#"+slideshowId+" li.slide"+currIndex+"").fadeIn();  
} 

function slidepagenation(slideshowId,slideno){  
     $("ul#"+slideshowId+" li.slides").hide(); 
     $("ul#"+slideshowId+" li.slide"+slideno+"").fadeIn(); 
     currIndex = slideno; 
} 

var tshone = 0; 
var tshtwo = 0; 

    slideshow('slideshow-one'); 
    tshone =setInterval(slideshow('slideshow-one'), 500); 
    slideshow('slideshow-two'); 
    tshtwo =setInterval(slideshow('slideshow-two'), 500); 

    $('ul.slideshow-one li a').click(function(){ 
     clearInterval(tshone); 
     var element = $(this); 
     var slideshowid=element.parent().parent().attr('class'); 
     var slideno = $("ul.slideshow-one li a").index($(this)); 
     slidepagenation(slideshowid,slideno); 
    }); 

    $('ul.slideshow-two li a').click(function(){ 
     clearInterval(tshtwo); 
     var element = $(this); 
     var slideshowid=element.parent().parent().attr('class'); 
     var slideno = $("ul.slideshow-two li a").index($(this)); 
     slidepagenation(slideshowid,slideno); 
    }); 

我的HTML是在這裏：

<ul class="slideshow" id="slideshow-one"> 
    <li class="slides slide0" style="display:block"> 
    Slide one 
    </li> 
    <li class="slides slide1"> 
    Slide two 
    </li> 
    <li class="slides slide2"> 
    Slide three 
    </li>  
</ul> 
<div class="full-length clearfix txt-center"> 
<ul class="slideshow-one"> 
    <li><a>1</a></li> 
    <li><a>2</a></li> 
    <li><a>3</a></li>  
</ul> 
</div> 
<br><br> 
<ul class="slideshow" id="slideshow-two"> 
    <li class="slides slide0" style="display:block"> 
    Slide one 
    </li> 
    <li class="slides slide1"> 
    Slide two 
    </li>  
</ul> 
<div class="full-length clearfix txt-center"> 
<ul class="slideshow-two"> 
    <li><a>1</a></li> 
    <li><a>2</a></li>  
</ul> 
</div> 

Answer 1

setInterval接受功能上運行間隔，但你給它undefined：

tshone =setInterval(slideshow('slideshow-one'), 500); 

...因爲該行調用slideshow並將其返回值setInterval。由於slideshow沒有返回值，因此調用它的結果是undefined。

相反：

tshone =setInterval(function() { 
    slideshow('slideshow-one'); 
}, 500); 

現在，我們正在創建一個函數並傳遞，爲setInterval。該功能每半秒呼叫slideshow。

另請注意，您只使用一個currIndex，但您試圖將其與兩個不同的幻燈片一起使用。這是行不通的。我建議完全刪除currIndex，並從DOM中找出哪個幻燈片處於活動狀態。事情是這樣的：

function slideshow(slideshowId){ 
    var slideShow = $("ul#"+slideshowId); 
    var slide; 

    slide = slideShow.find("li.slides:visible"); 
    if (slide.length > 1) { 
     slide.hide(); 
     slide = $(); 
    } 
    slide = slide.hide().nextAll("li.slides").first(); 
    if (slide.length == 0) { 
     slide = slideShow.find("li.slides").first(); 
    } 
    slide.fadeIn(); 
}