从头开始构建jQuery幻灯片
提问于 2013-02-21 13:52:28
我正在尝试建立一个自动播放幻灯片从头开始，既为我正在工作的网站，也作为一个学习练习。因此，我想学习如何自己做，而不是求助于使用插件或许多优秀的免费幻灯片之一。到目前为止，我得到了以下内容：http://jsfiddle.net/mandrill/zTdxs/15/
下面是JS：
$("#s1").css("display", "block"); // displays slide one as default on page load
$("#slideshow").click(function () {
$(".slide").each(function (index) {
var n = index + 1;
$("#s" + n).toggle("fade");
return index;
});
});它目前只是在第一张幻灯片和所有其他幻灯片之间切换。如何让它在连续循环中按顺序在幻灯片中循环？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-22 11:36:09
我知道该怎么做了。我对循环缺乏理解是我的失败所在。.each()函数不是必需的。下面是JS的工作原理：
$("#s1").css("display","block").addClass("active");
$("#slideshow").click(function(){
var currentSlide = $(".active").attr("id");
if ($("#slideshow .slide:last").hasClass("active")) {
$(".active").toggle("fade").removeClass("active");
$("#slideshow .slide:first").toggle("fade").addClass("active");
} else {
$(".active").toggle("fade").removeClass("active");
$("#"+currentSlide).next(".slide").toggle("fade").addClass("active");
}
});可以在这里看到它的实际效果：http://jsfiddle.net/mandrill/wLTns/6/
感谢所有人的输入:)下一步:使其自动播放并添加计时器...
Stack Overflow用户
发布于 2013-02-21 15:26:55
就像任何一段代码一样，如果你不确定如何做(但正在寻找学习经验)，那么没有更好的方法来学习已经编写的实际代码。获取您找到并阅读代码的几个幻灯片的(未缩小的)版本。
我最喜欢的幻灯片插件是cycle插件--它有一个轻量级的版本，代码可读性很好：http://malsup.github.com/jquery.cycle.lite.js
要为您的特定问题提供更具体的答案，您可以将索引重新设置为起始位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15003994
复制相关文章
![在Windows 10上安装TensorFlow及PyCharm开发环境[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/ea580e0335f4df160d3ae6085373aca7.jpg)
腾讯云开发者
