php - jQuery 循环在值 < 4 后继续，在 For 循环中从 1 重新开始

Question

jQuery 循环在值 < 4 后继续，再次从 1 开始尝试使用 jQuery 制作 slider 。但它正在加载但没有得到响应。

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

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

Answer 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 .