0

3つの異なる画像をクリックするとテーブルがスライドする場所に垂直jQueryスライドショーを作成しました。これは完璧に機能しますが、時限関数をスライドさせるためにも必要です。タイムアウト関数を使用してループを実行しようとしましたが、クリックのコードが機能せず、タイミング機能も機能しません。ちょっとしたミスなどがあったら、タイミングの試みは一番下にあります。

オリジナルクリック機能（動作）

$(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 に答える