Javascript 循环浏览div，以旋转木马样式显示/隐藏它们

我有以下HTML-

我想做的是通过循环，以一种无限的滑动方式一次显示一个

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

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

---

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

你可以用jQUery来完成。隐藏

：可见的
一个，并显示
.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来完成。隐藏
：可见的
一个，并显示
.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);​


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

你也应该看看众多插件中的一个。
使用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);
    }

});
}​

JSFIDLE：
使用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);
    }

});
}​

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

$(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);
});​

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

$(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);
});​

很好的使用：可见选择器！顺便说一句，next.length将根据值返回true或false，因此无需将其与整数进行比较。谢谢！当然是我想做的！很好的使用：可见选择器！顺便说一句，next.length将根据值返回true或false，因此无需将其与整数进行比较。谢谢！当然是我想做的！