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

我有一个完美的代码，当要旋转的缩略图的数量是16并且所有位置都相同时（只是由于缩略图编号而更改文件的名称）。例如：http：//www.urltoimage1.jpg....http：//www.urltoimage16.jpg在MouseOver中旋转缩略图并停止在Mouseleave中旋转

这是HTML：

<img width="189" height="142" 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

我认为，在这种差异的存在，最好是复制缩略图的所有网址该类别的图像，使HTML这样：

<img width="189" height="142" 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，如何能做到这一点的缩略图旋转？

感谢

来源

2017-03-03 Ivan Miranda

不要将网址存储在类的属性，使用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

usi如果你可以替换你的src属性。你可能想要在数据属性中存储原始的src。

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

在一个侧面说明，使用该

var rotateThumbs = [];

而不是

var rotateThumbs = new Array();

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

来源

2017-03-04 01:47:58

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

回答

相关问题