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

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

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'); }); }); 

Answer 2

你可以在这里看到我的答案：

• http://jsfiddle.net/YkuXt/1/

HTML

 
  
 
0
​ 

JavaScript的

 $(document).ready(function() { var images = []; images[0] = "http://sofzh.miximages.com/jquery/default.jpg"; images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg"; images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg"; images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg"; images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg"; images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg"; var loop; var i = 0; var counter = $("#counter"); $('.video-thumb img').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); }, 1000); }).mouseout(function() { clearInterval(loop); i = 0; $(this).attr('src', images[i]); counter.html(i); }); }); 

Answer 3

  var newImg = $(this).attr('src').replace(/default.jpg/,'1.jpg'); $(this).attr('src',newImg); window.setTimeout(function(){ newImg = $(this).attr('src').replace(/1.jpg/,'2.jpg'); $(this).attr('src',newImg); },1000); 

Answer 4

谢谢你们的回答！ （联合国）幸运的是我已经通过jQuery的Timers-plugin创建了这个。 这是我的工作代码：

 $j(document).ready(function(){ $j('.video-thumb img').bind('mouseover',function(){ var c = 1; $j(this).everyTime(1000,'interval',function(i){ $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,c+'.jpg')); if(c<3) { c++; } else { c = 1; } }); }).bind('mouseout',function(){ $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,'default.jpg')); $j(this).stopTime('interval'); }); });