凭借我有限的javascript知识,我把这个函数放在一起,当鼠标悬停在某个特定领域的某个类的图像上时,循环显示一些图像。
我想知道是否有更简单的方法来实现这个目标?
function imgRotate(){
var tid;
$('.tooltip img, .relatedImg, .searchImg')
.mouseenter(
function(){
$('.tooltip img, .relatedImg, .searchImg').stop();
var selector = $(this);
var imgSrc = selector.attr('src');
if(imgSrc.indexOf("ytimg.com/") > -1){
imgSrc = imgSrc.replace('defaul', '');
var imgSrcSliced = imgSrc.slice(0, -5);
var loop = 2;
selector.attr('src', imgSrcSliced+loop+'.jpg');
loop++;
function run(){
selector.attr('src', imgSrcSliced+loop+'.jpg');
loop++;
if(loop == 4){
loop = 1;
}
}
tid = setInterval(run,750);
}
})
.mouseleave(
function(){
$('.tooltip img, .relatedImg, .searchImg').stop();
clearInterval(tid);
});
}
javascript代码适用于类似下面代码的div
<div class="tooltip">
<a href="video/4-dbv0pHd50"><div class="title">My Video for Raging Robert - Overweight Guy asks for Help</div>
<img src="http://i.ytimg.com/vi/4-dbv0pHd50/2.jpg"><ul>
<li><b>Description: </b>This video went crazy viral, because robert has made the fir ...</li>
<li><b>Views: </b>26,063</li></ul>
</a>
</div>