Question

我正在尝试创建一个简单的jquery幻灯片。但是我无法让它循环遍历这些元素。

我知道next（）只是将活动类添加到下一个元素，而不是单个元素。这是我遇到麻烦的部分。如何将单个类应用于下一个元素，并且它将永远循环。

jQuery(document).ready(function () {

var slides = jQuery('#slideshow'); //Parent container for the slideshow
var activeClass = 'active'; //Set the active slide CSS class
var interval = 3000; // Interval in miliseconds
var countSlides = slides.children().length;

//Runs the slideshow
function cycle() {
    slides.children().removeClass(activeClass);
    slides.children().next().addClass(activeClass);
};

setInterval(cycle, interval);
});

Answer 1

根据documentation .next()返回集合中每个元素旁边的元素。在你的情况下，这是所有孩子。如果在删除.active类之前仅选择当前活动元素，则可以在其旁边获取元素。

function cycle() {
    var $current = slides.children('.active');
    $current
        .removeClass('active')
        .next().addClass('active');
}

编辑：如何循环。你需要检查是否有下一个元素。如果.next()没有返回新元素，您可以改为抓住第一个孩子：

var $current = slides.children('.active'),
    $next = $current.next();
if (!$next.length) {
   // No next slide, go back to the first one.
   $next = slides.children().first();
}
$current.removeClass('active');
$next.addClass('active');

jQuery将css类应用于下一个单元素

1 个答案: