jQuery循环继续值＆lt; 4再次以For循环中的1开始

时间：2016-06-30 08:42:19

标签： php jquery wordpress for-loop

jQuery循环继续值＆lt; 4再次尝试使用jQuery创建一个滑块。但它正在加载而没有得到回复。

$(document).ready(function(e) {
$('.slide:nth-child(2)').css('display','none');
$('.slide:nth-child(3)').css('display','none');
$('.slide:nth-child(4)').css('display','none');

    $('.list ul li:nth-child(1)').click(function(e){
        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display','none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display','none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display','none');

        $('.list ul li:nth-child(1)').addClass('active');
        $('.slide:nth-child(1)').fadeIn( 500, function(){
            $('.slide:nth-child(1)').css('display','block');
        });
    });

    $('.list ul li:nth-child(2)').click(function(e){
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display','none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display','none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display','none');

        $('.list ul li:nth-child(2)').addClass('active');
        $('.slide:nth-child(2)').fadeIn( 500, function(){   
            $('.slide:nth-child(2)').css('display','block');
        });
    });

    $('.list ul li:nth-child(3)').click(function(e){
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display','none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display','none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display','none');

        $('.list ul li:nth-child(3)').addClass('active');
        $('.slide:nth-child(3)').fadeIn( 500, function(){
            $('.slide:nth-child(3)').css('display','block');
        });
    });

    $('.list ul li:nth-child(4)').click(function(e){
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display','none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display','none');

        $('.list ul li:nth-child(3)').removeClass('active');    
        $('.slide:nth-child(3)').css('display','none');

        $('.list ul li:nth-child(4)').addClass('active');
        $('.slide:nth-child(4)').fadeIn( 500, function(){
            $('.slide:nth-child(4)').css('display','block');
        });
    });
var timeset;

timeset = setTimeout(
    function() {
        for (var i = 1; i <= 5; i++) {
            if (i > 4) {
                var i = 1;
            }
            $('.list ul li:nth-child(' + i + ')').click();
        }
    }, 3000);
clearTimeout(timeset);
});

正如您现在所看到的，我将完整的代码放在此处，以便您查看代码。

1 个答案:

答案 0 :(得分：1)

您已调用setTimeout（）函数并通过调用clearTimeout（）函数立即阻止执行。所以它不会起作用。

修改

通过评论进行沟通后，我想出了一个解决方案。我想，你的要求是每3秒钟滑动一次图像/ div。

<script>
$(document).ready(function(e) {

    $('.slide:nth-child(2)').css('display','none');
    $('.slide:nth-child(3)').css('display', 'none');
    $('.slide:nth-child(4)').css('display', 'none');

    $('.list ul li:nth-child(1)').click(function (e) {
        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(1)').addClass('active');
        $('.slide:nth-child(1)').fadeIn(500, function () {
            $('.slide:nth-child(1)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(2)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(2)').addClass('active');
        $('.slide:nth-child(2)').fadeIn(500, function () {
            $('.slide:nth-child(2)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(3)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(3)').addClass('active');
        $('.slide:nth-child(3)').fadeIn(500, function () {
            $('.slide:nth-child(3)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(4)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').addClass('active');
        $('.slide:nth-child(4)').fadeIn(500, function () {
            $('.slide:nth-child(4)').css('display', 'block');
        });
    });

    // Starting to slide (in each 3 seconds)

    var seconds = 3; 
    var i = 1;

    setTimeout(function () {
        slide();
    }, seconds * 1000);

    function slide() {

        if (i > 4) {
            i = 1;
        }

        //console.log(i);
        $('.list ul li:nth-child(' + i + ')').click();
        i++;

        setTimeout(function () {
            slide();
        }, seconds * 1000);
    }
});
</script>

（请注意，您的代码不符合标准，因为在那里重复相同的代码。相反，您应该使用函数。我只关注滑动部分作为问题的解决方案你已经提出了

编辑2

好的，我已经编写了一小段代码来满足您的要求。

请参阅此JSFiddle。

编辑3

在隐藏幻灯片之前停止幻灯片的淡入动画（当要显示新幻灯片时）。

请参阅此更新JSFiddle。

相关问题
最新问题