1

我有以下 HTML - http://jsfiddle.net/X763j/

我想要做的是循环遍历它们，以一种无限滑块的方式一次显示一个。

JavaScript 不是我的强项，但据我了解，您可以使用 jQuery .toggle 函数。

我该怎么做才能让它只显示下一个。

如果有人能指出我正确的方向，我将不胜感激。

4

3 回答 3

4

你可以用jQuery来做到这一点。隐藏:visible一个并显示.next()一个。一旦你走到尽头，下一个就是那个:first。

function next() {
    var current = $("#slider .slide:visible");
    current.hide();
    var next = current.next(".slide");
    if(next.length == 0)
        next = current.siblings().filter(":first")
    console.log(next);
    next.show();
}

setInterval(next, 1000);​

演示

您可以查看jQuery 文档以获取有关我使用的所有函数和选择器的更多信息。

你也应该看看许多jQuery Carousel插件之一。

于 2012-08-02T14:36:37.160 回答
0

使用 setInterval，您可以调用一个为您处理滑块的函数，就像这样。

setInterval(slide, 4000); // Set interval, callback function, and how often to swap slide

function slide() {
$('div.active').removeClass('active').fadeOut(500, function() {
    if($(this).next('div.slide').length) {
        $(this).next('div.slide').addClass('active').fadeIn(500);
    } else {
        $('div.slide').eq(0).addClass('active').fadeIn(500);
    }

});
}​

一个jsfiddle：http: //jsfiddle.net/X763j/3/

于 2012-08-02T14:36:57.250 回答
0

这是另一个仅循环幻灯片的代码示例。请注意，这不是优化的。

$(document).ready(function() {
    var i = 0;
    var slides = $('.slide');  
    var currentSlide = slides.first();        
    slides.each(function(index, value) { //Hide the all the slides
        $(value).hide();
    });

    currentSlide.show() //Show the first

    setInterval(function() { //Interval that loops.
          i++;
          if (i + 1 > slides.length) i = 0;
          currentSlide.hide();
          currentSlide = slides.eq(i);
          currentSlide.show();      
    }, 3000);
});​
于 2012-08-02T14:41:08.283 回答