0

是否有机会在悬停时更改图像 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
  • ETC..

最多 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">

并且还可以在更改拇指时添加淡入淡出等效果？

4

1 回答 1

1

变种计时器；

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

这里的小提琴

于 2013-04-05T09:13:58.437 回答