悬停时的图像幻灯片

时间:2012-03-06 21:43:31

标签: javascript jquery mouseevent setinterval

凭借我有限的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>

0 个答案:

没有答案