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

});

是的，你猜对了。它是用来在interval上更改YouTube的缩略图的。但是，我不知道如何创建间隔。现在它将缩略图更改为1.jpg，这是另一个缩略图，但接下来它将在1秒内将图像更改为2.jpg，以此类推

整个片段可能应该从头开始编写。建议

希望你能理解：-D

编辑：我更改了芬兰语单词的变量名，我不使用它们。就在这个例子中

Martti Laine

新的和默认的都是javascript。你不能使用它们

要创建间隔，应使用

setInterval

：

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

setInterval（函数（）{
//做点什么
// ...
}, 1000); //  你可以在这里看到我的答案：




HTML

<div class="video-thumb"> 
    <img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" />
</div>
<div id="counter">0</div>​


0​

JavaScript

$(document).ready(function() {

    var images = [];

    images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/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);
    });

});

$（文档）.ready（函数（）{
var图像=[]；
图像[0]=”http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg";
图像[1]=”http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg";
图像[2]=”http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg";
图像[3]=”http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg";
图像[4]=”http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg";
图像[5]=”http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg";
var回路；
var i=0；
var计数器=$（“#计数器”）；
$（'.video thumb img'）.mouseover（函数（）{
var image=这个；
循环=设置间隔（函数（）{
如果（i
谢谢大家的回答！（联合国）幸运的是，我已经通过jQuery的计时器插件创建了这个。这是我的工作代码：

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

});

$j（文档）.ready（函数（）{
$j（'.video thumb img'）.bind（'mouseover'，function（）{
var c=1；
$j（这个）。每次（1000，'interval'，函数（i）{
$j（this.attr（'src'，$j（this.attr（'src'））.replace（/（默认值为[0-9]）.jpg/，c+'.jpg'）；
if（c）
$(document).ready(function() {

    var images = [];

    images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/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);
    });

});

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

});