如何使用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);

因为该行调用CCD_ 3并将其返回值传递给CCD_。由于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();
}