在jQuery中创建一个更改图像的间隔？

Question

我有一个像这样的工作脚本:

jQuery(document).ready(function(){

    $('.video-thumb img').bind('mouseover',function(){
        var new = $(this).attr('src').replace(/default.jpg/,'1.jpg');
        $(this).attr('src',new);
    }).bind('mouseout',function(){
        var default = $(this).attr('src').replace(/[0-9].jpg/,'default.jpg');
        $(this).attr('src',default);
    });

});

是的,你猜对了.这是为了在间隔时间更改YouTube的缩略图.但是,我不知道如何创建间隔.它现在将缩略图更改为1.jpg,这是另一个缩略图,但它应该在1秒后将图像更改为2.jpg,依此类推.

整个片段应该是从头开始编写的.建议吗？

希望你明白:-D

编辑:我改变了芬兰语中的变量名,我不使用它们.就在这个例子中.

Martti Laine

Answer 1

新的和默认是javascript 中的保留字.你不能使用它们.

要创建间隔,您应该使用setInterval:

setInterval(function() {
  // do something
  // ...
}, 1000); // <- 1000ms = 1s

[ 看到它在行动 ]

jQuery(document).ready(function() {

    var timer, imgsrc, cnt = 0;

    $('.video-thumb img').bind('mouseover', function() {

      // if there is no timer
      if (!timer) {

        var $t = $(this);

        // get the image src
        imgsrc = $t.attr('src').replace('default.jpg','');

        // start a new timer
        timer = setInterval(function() {

          // periodically change the src
          $t.attr('src', imgsrc + (cnt+1) + ".jpg");

          // and adjust the counter
          cnt = ( cnt + 1 ) % 3; // 0, 1, 2

        }, 1000); // <- 1000ms = 1s
      }
    }).bind('mouseout',function() {

      // stop rotation
      if (timer) {
        clearInterval(timer);
        timer = null;
      }

      // set the default img
      $(this).attr('src', imgsrc + 'default.jpg');
    });
});