在 MouseOver 中旋转缩略图并在 Mouseleave 中停止旋转

Posted 2023-05-08

【中文标题】在 MouseOver 中旋转缩略图并在 Mouseleave 中停止旋转

【英文标题】：Rotate Thumbnails in MouseOver and Stop Rotate in Mouseleave

【发布时间】：2017-07-24 04:53:46

【问题描述】：

当要旋转的缩略图数量为 16 并且位置都相同时，我的代码可以完美运行（仅由于缩略图编号而更改文件名）。示例：http://www.urltoimage1.jpg....http://www.urltoimage16.jpg

这是html：

<img   src="http: //www.urltoimage8.jpg" class="someclass" id="latest-499" onmouseover="thumbStart('latest-499', 16, 'http: //www.urltoimage');" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">

这里是javascript：

// JavaScript Document

    //rotating thumb functions
    var rotateThumbs = new Array();

    function changeThumb( index, i, num_thumbs, path)
    
        if (rotateThumbs[index])
        
            if(i<=num_thumbs)          
                document.getElementById(index).src = path + i + ".jpg";
                i++;
                setTimeout("changeThumb('"+ index +"'," + i + ", " + num_thumbs + ", '" + path + "')", 600);
            else
                changeThumb( index, 1, num_thumbs, path);
            
        
    

    function thumbStart(index, num_thumbs, path)
        
        rotateThumbs[index] = true;
        changeThumb( index, 1, num_thumbs, path);

    

    function thumbStop(index, srco)
    
        rotateThumbs[index] = false;    
        document.getElementById(index).src = srco;
    

现在，问题在于某些文章的缩略图不在同一位置。示例：http://www.urltoimage1.jpg....http://www.urltoimageksks16.jpg

我认为，在存在这种差异的情况下，最好将缩略图的所有url复制到图像的类中，以这种方式留下html：

<img   src="http: //www.urltoimage8.jpg" class="http: //www.urltoimage1.jpg,http: //www.urltoimage2.jpg,...,http: //www.urltoimageksks16.jpg" id="latest-499" onmouseover="thumbStart" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">

现在我已经有了img标签类中的所有url，如何实现缩略图旋转？

谢谢

【参考方案1】：

不要将 url 存储在类属性中，而是使用 Data Attributes。 （或Data Attributes from jQuery）

类似

<img .. data-thumbnail-url="http: //www.urltoimageksks16.jpg" .. />

如果你使用 jQuery（你已经将它添加到你的标签中），你可以直接使用

var thumbnailSrc = jQuery('img').data('thumbnail');

如果你不使用它（因为我在你的代码中根本没有看到任何 jQuery）你必须使用它来代替

var thumbnailSrc = document.getElementById(index).dataset.thumbnail

使用它，您可以替换您的 src 属性。您可能希望将原始 src 存储在数据属性中。

关于旋转本身（不清楚它是否是您的问题的一部分，或者您是否想知道是否可以将 url 存储在类属性中），使用 jquery 有答案，例如jQuery animate image rotation You只需要调整悬停时执行的功能。你也可以使用纯 css Spin or rotate an image on hover

顺便说一句，使用这个

 var rotateThumbs = [];

而不是

 var rotateThumbs = new Array();

见In JavaScript, why is [ ] preferred over new Array();?