Question

我正在尝试为搜索结果的每个元素创建幻灯片。

想象结果会是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

我想在每个结果上添加一个鼠标悬停功能来启动幻灯片放映。它基本上用Array中的另一个替换当前Image。但是我没有使用ID来查找图像标签（根本没有ID），而是通过使用this.getElementsByTagName（＆＃34; img＆＃34;）来获取它们。当然现在Image改变了一次然后脚本卡住了，因为它不再是相同的元素而且没有getElementsbyTagName函数。当然。如果我会使用ID，它将完美地工作。

有没有办法在不使用ID的情况下完成这项工作？

这是一个小提琴链接btw：http://jsfiddle.net/ou0qqzfr/

我的下一步是为每个div元素使用不同的数组。所以，如果你有一些想法，那也很棒。

Answer 1

我通过将我的元素变量设为全局并将其保留为空来找到解决方案。如果我通过鼠标悬停，该函数只检查一次，如果该变量为空并将其初始化为img标记。其他时候它只是忽略了初始化。如果我离开mouseout元素将再次为空。不确定，如果有更好的解决方案，但现在这将有效。

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 = "";
});

为每个可变数量的img元素创建图像幻灯片

1 个答案: