Question

我正在尝试使用jQuery实现幻灯片放映我有一个名为SlideShow的按钮，点击它会触发幻灯片放映。我显示了一组缩略图：

<div class="pics">
 <img u="bob" id="pic1" src="/photos/thumbs/file1.jpg" class="apt" f="file1.jpg">
 <img u="rob" id="pic2" src="/photos/thumbs/file2.jpg" class="apt" f="file2.jpg">
 <img u="job" id="pic3" src="/photos/thumbs/file3.jpg" class="apt" f="file3.jpg">
 <img u="tom" id="pic4" src="/photos/thumbs/file4.jpg" class="apt" f="file4.jpg">
 <img u="scott" id="pic5" src="/photos/thumbs/file5.jpg" class="apt" f="file5.jpg">
</div>

你可以看到拇指上有'apt'类，它可以让我获得所有拇指的集合。 click事件处理程序只需要在一个带有setInterval（f，5000）的循环中调用一个函数这样我每隔5秒就会读取一个拇指的信息并从服务器加载完整的图像。

但无论我怎么做，我都会被定义。这是代码：

   var idx='';
   function SlideShow() {
     idx = 1;   //global variable to track index of current thumb inside <div>
     setInterval("GetFullImage()",5000);
   }

   function GetFullImage(){
     var i = $('.apt:nth-child(' + idx + ')').attr("id"); 
     var u = $('.apt:nth-child(' + idx + ')').attr("u"); 
     var f = $('.apt:nth-child(' + idx + ')').attr("f");
     alert('i:=' + i + ' u:' + u + ' f:' + f); <-- always say i, u, f undefined after first time
     idx++;        
   }

有什么问题？我没有玩过setInterval（）调用。

Answer 1

你引用的是第n个孩子而不是兄弟姐妹。这些图像都是彼此的兄弟姐妹，而不是居住在下一个中的兄弟姐妹。我会把它提升到一个水平，然后使用nth-child。或者只是抓住：

$('.pics').children('img').length

作为阈值，然后使用：

$('.pics img:eq('+idx+')')

这样你就可以在达到极限之前继续增加idx，然后重置计数器。

Answer 2

试试这个，即从“GetFullImage（）”中删除语音标记和括号

setInterval(GetFullImage,5000);

setInterval方法困境

2 个答案: