我有一个像这样的工作脚本:
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
答案 0 :(得分:8)
新和默认为reserved words。你不能使用它们。
要创建间隔,您应该使用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');
});
});
答案 1 :(得分:3)
你可以在这里看到我的答案:
<强> HTML 强>
<div class="video-thumb">
<img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" />
</div>
<div id="counter">0</div>
<强>的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);
});
});
答案 2 :(得分:0)
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);
答案 3 :(得分:0)
谢谢你们的回答! (不幸的是我已经将它创建为jQuery Timer-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');
});
});