为每个变量创建一个图像幻灯片数量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 = ""; 
});