-2

私は次の Jquery コードを持っています。これには 2 つの問題があります。助けてください。前もって感謝します。

このコードは何をしますか? マウスオーバーで画像を変更します (画像) (画像フレームが変化し続けると、ゲーム効果またはビデオ効果が得られます 1-100)

問題？1）これをボタンのホバーで実行したい、つまり#btn-forward前進と#btn-back後退のために実行したいのですが、奇妙な理由でボタンでは機能しません（コードでのみ前進を処理しました）助けてください。2) ユーザーが停止した 10 フレームごとにブレーク ポイントを作成し、リンクなどを表示して、そのポイントから続行できるようにしたいと考えています。3）これはスムーズに実行されていません。そのための提案はありますか？

注: よくわからない場合はお知らせください...ありがとう

$(document).ready(function() {
    var images = [];

    images[0] = "img/1.jpg";
    images[1] = "img/2.jpg";
    images[2] = "img/3.jpg";
    images[3] = "img/4.jpg";
    images[4] = "img/5.jpg";
    images[5] = "img/6.jpg";
    images[6] = "img/7.jpg";
    images[7] = "img/8.jpg";
    images[8] = "img/9.jpg";
    images[9] = "img/10.jpg";

    images[10] = "img/11.jpg";
    images[11] = "img/12.jpg";
    images[12] = "img/13.jpg";
    images[13] = "img/14.jpg";
    images[14] = "img/15.jpg";
    images[15] = "img/16.jpg";
    images[16] = "img/17.jpg";
    images[17] = "img/18.jpg";  
    images[18] = "img/19.jpg";
    images[19] = "img/20.jpg";

    images[20] = "img/21.jpg";
    images[21] = "img/22.jpg";
    images[22] = "img/23.jpg";
    images[23] = "img/24.jpg";
    images[24] = "img/25.jpg";
    images[25] = "img/26.jpg";
    images[26] = "img/27.jpg";
    images[27] = "img/28.jpg";
    images[28] = "img/29.jpg";
    images[29] = "img/30.jpg";

    images[30] = "img/31.jpg";
    images[31] = "img/32.jpg";
    images[32] = "img/33.jpg";
    images[33] = "img/34.jpg";
    images[34] = "img/35.jpg";
    images[35] = "img/36.jpg";  
    images[36] = "img/37.jpg";
    images[37] = "img/38.jpg";
    images[38] = "img/39.jpg";
    images[39] = "img/40.jpg";

    images[40] = "img/41.jpg";
    images[41] = "img/42.jpg";
    images[42] = "img/43.jpg";
    images[43] = "img/44.jpg";
    images[44] = "img/45.jpg";
    images[45] = "img/46.jpg";
    images[46] = "img/47.jpg";
    images[47] = "img/48.jpg";
    images[48] = "img/49.jpg";
    images[49] = "img/50.jpg";

    images[50] = "img/51.jpg";
    images[51] = "img/52.jpg";
    images[52] = "img/53.jpg";
    images[53] = "img/54.jpg";  
    images[54] = "img/55.jpg";
    images[55] = "img/56.jpg";
    images[56] = "img/57.jpg";
    images[57] = "img/58.jpg";
    images[58] = "img/59.jpg";
    images[59] = "img/60.jpg";

    images[60] = "img/61.jpg";
    images[61] = "img/62.jpg";
    images[62] = "img/63.jpg";
    images[63] = "img/64.jpg";
    images[64] = "img/65.jpg";
    images[65] = "img/66.jpg";
    images[66] = "img/67.jpg";
    images[67] = "img/68.jpg";
    images[68] = "img/69.jpg";
    images[69] = "img/70.jpg";

    images[70] = "img/71.jpg";
    images[71] = "img/72.jpg";
    images[72] = "img/73.jpg";
    images[73] = "img/74.jpg";  
    images[74] = "img/75.jpg";
    images[75] = "img/76.jpg";
    images[76] = "img/77.jpg";
    images[77] = "img/78.jpg";
    images[78] = "img/79.jpg";
    images[79] = "img/80.jpg";

    images[80] = "img/81.jpg";
    images[81] = "img/82.jpg";
    images[82] = "img/83.jpg";
    images[83] = "img/84.jpg";
    images[84] = "img/85.jpg";
    images[85] = "img/86.jpg";
    images[86] = "img/87.jpg";
    images[87] = "img/88.jpg";
    images[88] = "img/89.jpg";
    images[89] = "img/90.jpg";

    images[90] = "img/91.jpg";
    images[91] = "img/92.jpg";
    images[92] = "img/93.jpg";
    images[93] = "img/94.jpg";
    images[94] = "img/95.jpg";
    images[95] = "img/96.jpg";
    images[96] = "img/97.jpg";
    images[97] = "img/98.jpg";
    images[98] = "img/99.jpg";
    images[99] = "img/100.jpg";
    images[100] = "img/101.jpg";    

    var loop;
    var i = 0;

    var counter = $("#counter");

    $('.video-thumb img, #btn-forward').mouseover(function() {
        var image = this;
        loop = setInterval(function() {

            if (i < images.length - 1) {
                i++;
                $(image).attr('src',images[i]);
            } else {
                i = 0;
                $(image).attr('src',images[i]);
            } 
            counter.html(i);
        }, 100); 

    }).mouseout(function() {
        clearInterval(loop);
        /*i = 0;*/
        $(this).attr('src', images[i]); 
        counter.html(i);
    });

});

</script>


</head>

<body>
<div class="video-thumb"> 
    <img src="img/1.jpg" />
</div>
<input type="submit" id="btn-forward" value="Forward" />
<input type="submit" id="btn-back" value="Back" />
<div id="counter">0</div>
</body>
</html>
4

2 に答える 2

1

これは、配列をループする方法です。

<script>

    var num  = 100;

    for(var i = 0; i <= num; i++){
        console.log("inc : " + i);
    }


    for(var k = num ; k >= 0; k--) {
        console.log("dec : " + k);
    }

</script>

最初のループincrementsと 2番目のループdecrements

于 2013-06-24T13:12:22.617 に答える