爲每個變量創建一個圖像幻燈片數量img Elements

Question

我試圖爲搜索結果的每個元素創建一個幻燈片。

想象結果會是這樣的：

var speed = 1200; 
 
var image = 0; 
 
var slideimages = [ 
 
    ["http://www.digicpictures.com/images/upload/Thumbnails/about_digic_logo_neg_200x200.jpg"], 
 
    ["http://flash.sonypictures.com/shared/global/images/sonypictures_share_200x200.jpg"], 
 
    ["https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAATdAAAAJGZiYmMzZTAzLWM4MmUtNGIzYS1hZjNkLTY5YjFjMWRkOTViMA.png"] 
 
]; 
 

 
$("div").mouseover(function() { 
 
    var element = this.getElementsByTagName("img"); 
 

 
    clearTimeout(arguments.callee.to); 
 
    image = ++image % slideimages.length; 
 
    element[0].src = slideimages[image]; 
 
    //document.getElementById('test').src = slideimages[image]; 
 
    arguments.callee.to = setTimeout(arguments.callee, speed); 
 

 
}); 
 

 
$("div").mouseout(function() { 
 
    clearTimeout(arguments.callee.to); 
 
});

<div class="keyframe-img"> 
 
    <a class="videolink" href="#"> 
 
    <img src="http://www.digicpictures.com/images/upload/Thumbnails/about_digic_logo_neg_200x200.jpg"> 
 
    </a> 
 
</div> 
 
<div class="keyframe-img"> 
 
    <a class="videolink" href="#"> 
 
    <img src="http://www.digicpictures.com/images/upload/Thumbnails/about_digic_logo_neg_200x200.jpg"> 
 
    </a> 
 
</div>

我想在每添加導致鼠標懸停功能開始播放幻燈片。 它基本上將當前圖像替換爲另一個來自陣列。 但是，使用ID來找到圖像標記（根本沒有ID），我使用this.getElementsByTagName（「img」）得到它們。 當然，現在圖像會改變一次，然後腳本就會掃描，因爲這個不再是相同的元素，並且沒有getElementsbyTagName函數。 當然。如果我使用身份證，它會完美地工作。

有沒有辦法讓這項工作不使用ID？

這裏北京時間順便說一句提琴鏈路：http://jsfiddle.net/ou0qqzfr/

我的下一個步驟是使用不同的陣列爲每個div元素。所以如果你有一些想法來做到這一點，那也會很棒。

Answer 1

我發現一個解決方案，使我的元素變量爲全局變量並將其保留爲空。如果我使用鼠標懸停，函數只檢查一次，如果變量爲空，並將其初始化爲img標記。有時候它忽略了初始化。 如果我用鼠標離開元素將再次爲空。 不確定，如果有更好的解決方案，但現在可以使用。

var element = ""; 
var speed = 1200; 
var image = 0; 
var slideimages = [ 
    ["http://www.digicpictures.com/images/upload/Thumbnails/about_digic_logo_neg_200x200.jpg"], 
    ["http://flash.sonypictures.com/shared/global/images/sonypictures_share_200x200.jpg"], 
    ["https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAATdAAAAJGZiYmMzZTAzLWM4MmUtNGIzYS1hZjNkLTY5YjFjMWRkOTViMA.png"] 
]; 

$("div").mouseover(function() { 
    if (element == "") 
    element = this.getElementsByTagName("img"); 

    clearTimeout(arguments.callee.to); 
    image = ++image % slideimages.length; 
    element[0].src = slideimages[image]; 
    arguments.callee.to = setTimeout(arguments.callee, speed); 

}); 

$("div").mouseout(function() { 
    clearTimeout(arguments.callee.to); 
    element = ""; 
});