如何使用jquery循环播放幻灯片

基本上，我正在尝试使用jquery创建幻灯片。这里的幻灯片导航工作正常，但幻灯片循环不工作
我在这里试过我的
我的剧本是：

 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>

幻灯片一


幻灯片二


幻灯片三



一,
2
3






幻灯片一


幻灯片二



一,
2

---

​

setInterval

接受一个函数在该区间上运行，但您给它的是

未定义的
：

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

…因为该行调用
slideshow
，并将其返回值传递给
setInterval
。由于
slideshow
不返回值，因此调用该值的结果是
undefined

相反：

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

现在我们正在创建一个函数并将其传递给
setInterval
。该函数每半秒调用一次幻灯片放映

还请注意，您只使用了一个
currendex
，但您尝试将其用于两个不同的幻灯片。那是行不通的。我建议完全取消
currendex
，从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();
}

setInterval
接受一个函数在区间上运行，但您给它的是
undefined
：

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

…因为该行调用
slideshow
，并将其返回值传递给
setInterval
。由于
slideshow
不返回值，因此调用该值的结果是
undefined

相反：

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

现在我们正在创建一个函数并将其传递给
setInterval
。该函数每半秒调用一次幻灯片放映

还请注意，您只使用了一个
currendex
，但您尝试将其用于两个不同的幻灯片。那是行不通的。我建议完全取消
currendex
，从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();
}

您试图使用一个
currendex
变量来跟踪两个幻灯片。（加上TJ下面所说的。）另外，为什么要在这两个函数中重复
.hide（）
和
.fadeIn（）
？从
slideshow（）
中调用
slidegenation（slideShowId，（currendex+1）%len）
。为什么不使用50个已创建的幻灯片插件中的一个呢？您正试图使用一个
currendex
变量来跟踪两个幻灯片。（加上TJ下面所说的。）另外，为什么要在这两个函数中重复
.hide（）
和
.fadeIn（）
？从
slideshow（）
中调用
slidegagenation（slideShowId，（currendex+1）%len）
。为什么不使用已经创建的50个幻灯片插件中的一个呢？您好，我已经尝试了您的建议，但它显示了一些其他问题。请在这里检查这个@SureshPattu:“一些其他问题”不是一个有用的描述。@SureshPattu:“工作不正常”并不比“其他问题”更能说明问题。但我之前编辑过，告诉您问题是什么以及如何解决问题，我刚刚添加了一些示例代码。您好，我尝试了您的建议，但它显示了一些其他问题。请检查这里的@surespattu:“其他问题”“不是一个有用的描述。@SureshPattu：“工作不正常”与“其他一些问题”相比并没有更多的信息。但我之前确实编辑过，告诉您问题是什么以及如何解决它，我刚刚添加了一些示例代码。