0

我制作了一个垂直的 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.*

        });
4

1 回答 1

2

您应该能够概括您的解决方案，而不是复制这么多代码，因为您对每个选项卡执行或多或少相同的事情。这个解决方案减少了很多冗余：

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 );​
于 2012-09-03T01:26:58.757 回答