Question

有没有机会在悬停时更改图像src，最多可以计数10并从第一次开始返回？

这就是我需要的，这是默认的拇指， flv-3.jpg ！

<img src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" />

鼠标悬停时只需更改数字

FLV-1.JPG
FLV-2.JPG
FLV-3.JPG
FLV-4.JPG
等。

最多10个，然后再返回并从1号开始，但是当我从拇指移动鼠标时需要回到默认拇指flv-3.jpg

这就是我现在使用但它不是很好的解决方案，

var _thumbs = new Array();
function changeThumb(index, i, num_thumbs, path)
{
    if (_thumbs[index])
    {         
        document.getElementById(index).src = path + i + ".jpg";

        preload = new Image();
        preload_image_id = (i + 1 > num_thumbs) ? 1 : i + 1;
        preload.src = path + preload_image_id + ".jpg";
        i = i % num_thumbs;
        i++;
        setTimeout("changeThumb('" + index + "'," + i + ", " + num_thumbs + ", '" + path + "')", 800)
    }
}    
function startThumbChange(index, num_thumbs, path)
{    
    if (num_thumbs < 2) return false;
    _thumbs[index] = true;
    changeThumb(index, 1, num_thumbs, path);
}
function endThumbChange(index, image)
{
    _thumbs[index] = false;
    document.getElementById(index).src = image;
}

和html

<img onmouseout="endThumbChange('515e9279d96c6', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg');" onmouseover="startThumbChange('515e9279d96c6', '10', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-','.jpg');" id="515e9279d96c6" src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" class="img">

还有可能在拇指改变时添加淡化等效果吗？

Answer 1

var timer;

$('div.settingsButton').hover(function() {

var angle = 0,
    $this = $(this);

timer = setInterval(function() {
    angle += 4;
    $this.rotate(angle);
}, 50);
},
function() {

timer && clearInterval(timer);
$(this).rotate(0);

这里是fiddle

jQuery图像在悬停时旋转

1 个答案: