javascript - 如何在 jQuery 中创建旋转缩略图功能？

Question

基本上，每次用户将鼠标悬停在图像上时，我都需要旋转缩略图。这是我失败的尝试:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

       $('img').hover(function() {

            theImage = $(this).attr('id');
            otherImages = $(this).attr('class').split('@');
            rotateThumbs(otherImages, theImage);

       }, function() {
           //
       });

    });

    function rotateThumbs(otherImages, theImage) {

        for (i=0; i < otherImages.length; i++) {
            setInterval($('#'+theImage).attr('src', otherImages[i]), 1000);
        }

    }
</script>

<img id="myImage" src="http://www.google.com/images/logos/ps_logo2.png" class="http://www.google.com/images/logos/ps_logo2.png@http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png@http://dogandcat.com/images/cat2.jpg" width="174" height="130"  />

有谁知道这是如何实现的？

Answer 1

这里有一些问题。

1. setInterval 需要函数引用作为第一个参数，但您正在执行返回 jQuery 对象的代码。
2. setInterval 以指定的时间间隔重复执行第一个函数。那是你想要做的吗？每秒交换图像？
3. 根据您纠正第一个问题的方式，您可能会遇到 i 是 otherImages.length 的问题，因此 src 是设置为 undefined。
4. 假设您解决了问题 3，您会遇到图像交换速度快到难以察觉的问题，并且看起来好像总是显示最后一张图像。

相反，不要使用循环。每次显示新图像时增加计数器。试试这个:

function rotateThumbs(otherImages, theImage) {
    var i = 0;
    var interval = setInterval(function() {
        $('#'+theImage).attr('src', otherImages[i++]);
        if (i >= otherImages.length) {
            clearInterval(interval);
        }
    }, 1000);
}