Question

我正在制作一个简单的幻灯片。

效果很好，直到用户点击最后一个孩子的.right。我需要重新开始这个过程：

$('.slide-list .img:first-child').addClass('active').clone()
    .appendTo('.main-slide');

$('.slide-list .img').click(function () {
    $('.slide-list .img').removeClass('active');
    $(this).addClass('active');
    $('.main-slide').empty();
    $(this).clone().appendTo('.main-slide');
});

$('.right').click(function () {
        $('.main-slide').empty();
        $('.active.img').removeClass('active')
            .next()
            .addClass('active').clone().appendTo('.main-slide');
});

但是，我不确定如何实施这样的声明。

Answer 1

试试这个，

$('.right').click(function () {
    $('.main-slide').empty();
    if($('.active.img').is(':last-child')) {
        $('.active.img').removeClass('active');
        $('.img:first').addClass('active').clone().appendTo('.main-slide');
    } else {
        $('.active.img').removeClass('active')
        .next()
        .addClass('active').clone().appendTo('.main-slide');
    }
});

Answer 2

我刚刚更正了您的代码：您需要使用jQuery的is(':last-child')条件和selector + jQuery的.first()选择器方法引用：
http://api.jquery.com/is/
http://api.jquery.com/last-child-selector/
http://api.jquery.com/first/

    $('.slide-list .img:first-child').addClass('active').clone()
        .appendTo('.main-slide');

    $('.slide-list .img').click(function () {
        $('.slide-list .img').removeClass('active');
        $(this).addClass('active');
        $('.main-slide').empty();
        $(this).clone().appendTo('.main-slide');
    });

    function cycler(d) {
        d = (d=="right"); //right=true, left=false
        $('.main-slide').empty();
        if( $('.active.img').is( (d?':last-child':':first-child') ) ){
            $('.active.img').removeClass('active');
            $('.slide-list .img')[d?'first':'last']()
            .addClass('active')
            .clone()
            .appendTo('.main-slide');
        } else{
            $('.active.img').removeClass('active')[d?'next':'prev']()
            .addClass('active').clone().appendTo('.main-slide');
        }

    };
    $('.right').click( function(){ cycler('right'); } );
    $('.left').click( function(){ cycler('left'); } );

请参阅http://jsfiddle.net/2FVQm/ - 右箭头现在正在右转（原始答案小提琴）;）
更新回答小提琴： http://jsfiddle.net/F8a7v/（一般骑自行车离开||按指定方向“d”）

Answer 3

你可以使用 .index（） http://api.jquery.com/index/来获取当前幻灯片的索引，如果index等于滑块的数量减1，那么你就到了最后

我开发了一个非常小的滑块时间http://romanovian.com/blog/laboratorio/jquery-minislider/，也许可以看一下。

Answer 4

您可以做的最简单的更改是检查是否存在next元素，并相应地操作DOM：

$('.right').click(function () {
        $('.main-slide').empty();
    if($('.active.img').next().length > 0){ /* CHECK IF LAST ELEMENT */
        $('.active.img').removeClass('active')
            .next()
            .addClass('active').clone().appendTo('.main-slide');
    }
    else
    {
        /* START OVER FROM FIRST ELEMENT */ 
        $('.active.img').removeClass('active');
       $('.img').first().addClass('active').clone().appendTo('.main-slide');
    }
});

演示：http://jsfiddle.net/Br5HJ/16/

Answer 5

试试这个

$('.right').click(function () {
        $('.main-slide').empty();
    if(!$('.active.img:last-child').hasClass("active"))
    {
        $('.active.img').removeClass('active')
            .next()
            .addClass('active').clone().appendTo('.main-slide');
    }
    else{
        $(".slide-list .img:last-child").removeClass("active");
        $('.slide-list .img:first-child').addClass('active').clone()
    .appendTo('.main-slide');
    }

});

如果是最后一个孩子，请这样做

5 个答案: