在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中旋轉

回答

相關問題