jQuery循环在值<4之后继续,以For循环中的1重新开始

达里特·索尼

值小于4时,继续执行jQuery循环,以1重新尝试使用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);
});

如您现在所见,我将完整的代码放在这里,以便您查看代码。

阿桑卡斯里

您已经调用了setTimeout()函数,并通过调用clearTimeout()函数来阻止立即执行。因此它将不起作用。

编辑

通过评论进行交流之后,我想出了一个解决方案。我想,您的要求是每3秒滑动一次图像/格。

<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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何重绘-在处理中重新开始循环

for循环不断重新开始

如何重新开始循环?

当循环中没有更多元素时如何重新开始?

如何使while循环重新开始一个做一定量的迭代之后

我的while循环在运行代码后返回顶部。如何使它在“再次;”之后重新开始?

循环结束后从头开始重新开始循环迭代-JS

for循环,如果满足条件,停止搜索,增加索引,重新开始循环

如何强制中断重新启动主循环而不是重新开始?(时间问题!)

jQuery的存储值从for循环?

满足最后一个条件后,Do-while循环不会重新开始

用js循环imacro,暂停20秒,然后重新开始

如何循环遍历所有玩家然后重新开始?

while循环执行类,然后停止而不是重新开始?

当num_rows == 0时php循环重新开始

我如何停止其他循环并让它重新开始?

如何在计时器后重新开始循环?

使循环重新开始,并在完成每个步骤后返回初始颜色

如果不满足特定条件,则重新开始循环内的最新过程

计时器等待循环完成并重新开始

使用我的代码,我无法在末尾添加循环以便代码重新开始

是否可以制作一个python脚本循环并重新开始

如果达到最大值,自动增量会从0重新开始吗?

在活动内部,如何暂停for循环以调用片段,然后在片段上单击按钮,然后恢复循环以重新开始

从for循环检索值到jquery

Spark:重新开始计数特定值

jQuery在.each循环中获取滑块的值

循环将具有不同纪元编号的神经网络拟合,而无需每次都重新开始

R:循环遍历行直到满足条件,然后在下一行重新开始