MouseOverでサムネイルを回転させ、Mouseleaveで回転を停止する

Question

回転させるサムネイルの数が16で、位置がすべて同じである場合に完全に機能するコードがあります（サムネイル番号のためにファイルの名前を変更するだけです） 。例：のhttp：//www.urltoimage1.jpg....http：javascriptのここ

<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 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; 
    } 

//www.urltoimage16.jpg

これはhtmlです

問題は、サムネイルが同じ場所にない記事があります。例：http：//www.urltoimage1.jpg....http：//www.urltoimageksks16.jpg

この不一致が存在すると、サムネイルのすべてのURLをコピーする方がよいと思いますこのように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を持っていることを、どのようにサムネイルが回転することを達成することができますか？

おかげ

Answer 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 

usi src属性を置き換えることができます元のsrcをデータ属性に格納したいと思うでしょう。

自分自身を回転させることについて（あなたの質問の一部であるかどうか、またはクラス属性にURLを保存することができたらわかりたい場合）、jQuery animate image rotationのようなjqueryを使用した場合の回答がありますホバリング時に実行される機能を変更する必要があります。あなたはむしろ

var rotateThumbs = new Array(); 

よりも、この

var rotateThumbs = []; 

を使用し、サイドノートでは、純粋なCSSだけでなくSpin or rotate an image on hover

を使用するを参照してください可能性がIn JavaScript, why is [ ] preferred over new Array();?