Question

我制作了一个垂直jQuery幻灯片，如果你点击3个不同的图像，表格会滑动。这很完美，但我还需要它在定时功能上滑动。我已经尝试使用超时功能进行循环，但是我的代码点击不起作用，时序功能甚至无法工作。如果它可能只是一个小错误或其他什么，那么在某个时间点的尝试是在底部。

原始点击功能（有效）

$(document).ready(function() {


    $("#slide1-1").click(function() {
        $("#slide1_images").css("top","0");
        $(".imagetab").css("opacity","1.0");
        $(".imagetab").css("filter",'alpha(opacity="100")');
        $(".imagetab2").css("opacity",".4");
        $(".imagetab2").css("filter",'alpha(opacity="40")');
        $(".imagetab3").css("opacity",".4");
        $(".imagetab3").css("filter",'alpha(opacity="40")');

    });
    $("#slide1-2").click(function() {
        $("#slide1_images").css("top","-430px");
        $(".imagetab2").css("opacity","1.0");
        $(".imagetab2").css("filter",'alpha(opacity="100")');
        $(".imagetab").css("opacity",".4");
        $(".imagetab").css("filter",'alpha(opacity="40")');
        $(".imagetab3").css("opacity",".4");
        $(".imagetab3").css("filter",'alpha(opacity="40")');

    });
    $("#slide1-3").click(function() {
        $("#slide1_images").css("top","-860px");
        $(".imagetab3").css("opacity","1.0");
        $(".imagetab3").css("filter",'alpha(opacity="100")');
        $(".imagetab2").css("opacity",".4");
        $(".imagetab2").css("filter",'alpha(opacity="40")');
        $(".imagetab").css("opacity",".4");
        $(".imagetab").css("filter",'alpha(opacity="40")');

    });

});

计时尝试（不起作用）

        $(document).ready(function() {

    var slide = function() {
    $("#slide1_images").css("top","0");
    }

    var slide2 = function() {
    $("#slide1_images").css("top","-430px");
    }

    var slide3 = function() {
    $("#slide1_images").css("top","-860px");
    }

    var i;

    for(i = 0; i < element.length; ++i) {
    if (i=="1")
     {
      setTimeout(slide, 2000);
     }
    if (i=="2")
     {
      setTimeout(slide2, 2000);
     }
    if (i=="3")
     {
      setTimeout(slide3, 2000);
     }
    if (i=="4")
     {
      var i = "0";
     }

    }

 *INSERT CODE FROM ABOVE HERE.*

        });

Answer 1

您应该能够概括您的解决方案而不是复制如此多的代码，因为您对每个选项卡执行的操作大致相同。该解决方案减少了大量冗余：

function slide() {
    $("#slide1_images").css("top", "0");
}

function slide2() {
    $("#slide1_images").css("top", "-430px");
}

function slide3() {
    $("#slide1_images").css("top", "-860px");
}

$(document).ready(function() {
    setTimeout(slide, 2000);
    setTimeout(slide2, 4000);
    setTimeout(slide3, 6000);
    $("#slide1-1, #slide1-2, #slide1-3").click(function() {
        var index = $(this).index("#slide1-1, #slide1-2, #slide1-3");
        var tab = ['.imagetab', '.imagetab2', '.imagetab3'];

        $( tab[index] ).css("opacity", "1.0");
        $( tab[index] ).css("filter", 'alpha(opacity="100")');
        $( tab[(index+1) % 3] ).css("opacity", ".4");
        $( tab[(index+1) % 3] ).css("filter", 'alpha(opacity="40")');
        $( tab[(index+2) % 3] ).css("opacity", ".4");
        $( tab[(index+2) % 3] ).css("filter", 'alpha(opacity="40")');
    });
    $("#slide1-1").click(slide);
    $("#slide1-2").click(slide2);
    $("#slide1-3").click(slide3);
});

此外，应该注意的是，这些动画甚至不需要setTimeout; jQuery有一个内置的.animate()函数，用于通过更平滑的过渡来修改css属性：

$("#slide1_images").animate({ top: "-860px" }, 2000 );

如何将动画效果与点击功能混合使用？

1 个答案: