Question

我有以下Jquery代码我有两个问题请帮忙。提前谢谢。

这段代码有什么作用？在鼠标悬停（即图像）上更改图像（图像帧保持不变，给出游戏效果或视频效果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>

Answer 1

你这样做是这样的：

$(document).ready(function() {
    var images = 100, // number of images
        loop,
        i = 0;

    $('#btn-forward, #btn-back').on({
        mouseenter: function(e) {
            i = parseInt( $('.video-thumb img').prop('src').replace(/\D+/,''), 10);
            loop = setInterval(function() {
                i = e.target.id == 'btn-forward' ? (i>images?1:i+1) : (i<2?(images+1):i-1);
                $('.video-thumb img').prop('src', 'img/'+(i)+'.jpg');
                $('#counter').text(i);
            }, 100); 
        },
        mouseleave: function() {
            clearInterval(loop)
        }
    });
});

FIDDLE

数组不是必需的，因为您可以使用递增变量。

另请注意，您使用forword和forward作为ID和选择器，您需要决定它是哪一个！

修改

要预加载所有图像，可以添加一个小的预加载循环：

$(document).ready(function() { var images = 100, loop, i = 0; for(var j=1; j<102; j++) { var img = new Image(); img.src = 'img/'+j+'.jpg' } $('#btn-forward, #btn-back').on({ mouseenter: function(e) { i = parseInt( $('.video-thumb img').prop('src').replace(/\D+/,''), 10); loop = setInterval(function() { i = e.target.id == 'btn-forward' ? (i>images?1:i+1) : (i<2?(images+1):i-1); $('.video-thumb img').prop('src', 'img/'+(i)+'.jpg'); $('#counter').text(i); console.log(i) }, 100); }, mouseleave: function() { clearInterval(loop) } }); });

Answer 2

这就是你在数组中循环的方式：

<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，第二个循环decrements

JQuery在鼠标悬停时更改图像

2 个答案: