我正在尝试使用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()调用中玩的不多。

最佳答案

您引用的是第n个孩子,而不是兄弟姐妹。这些图像是彼此的同级,而不是下一个。我会将其提高一个级别,然后使用nth-child。或者只是抢:

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


作为阈值,然后使用:

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


这样,您可以不断增加idx直到达到限制,然后重置计数器。

关于javascript - setInterval方法困境,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4156407/

10-12 12:56
查看更多