javascript 带有 setInterval 的 jQuery 图像滑块循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12301246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery image slider loop with setInterval
提问by afcdesign
I have this markup:
我有这个标记：
<div id="imagedisplay">
<div class="slider_item active"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item last"></div>
</div>
and this script
和这个脚本
setInterval(function(){
$('.slider_item.active').fadeOut().removeClass('active')
.next('.slider_item').fadeIn().addClass('active');
}, 5000);
How do I make this loop in the best way? Right now the last image just fades out, without the first image fading in again.
我如何以最好的方式制作这个循环？现在，最后一张图像只是淡出，而第一张图像不会再次淡入。
采纳答案by Joe
Check if nextItem has items and if not set it back to the first:
检查 nextItem 是否有项目，如果没有将其设置回第一个：
var nextItem = $('.slider_item.active')
.fadeOut()
.removeClass('active')
.next('.slider_item');
if (nextItem.length === 0) {
nextItem = $('.slider_item').first();
}
nextItem.fadeIn().addClass('active');
Here's an example: jsFiddle
这是一个例子：jsFiddle
回答by Danil Speransky
Demo: http://jsfiddle.net/gdS8Q/2/
演示：http: //jsfiddle.net/gdS8Q/2/
var cur = 0;
var count = $('.slider_item').length;
$('.slider_item').hide();
$('.slider_item').eq(0).show();
setInterval(function() {
$('.slider_item').eq(cur).fadeOut(function () {
$(this).removeClass('active');
cur = (cur + 1) % count;
$('.slider_item').eq(cur).addClass('active').fadeIn();
});
}, 2000);?
回答by Lucian Al-Zafari
I know it is bumping an old thread, but can someone tell me the correct code to display the previous div?
我知道它会撞到一个旧线程，但是有人可以告诉我显示前一个 div 的正确代码吗？
This is the HTML
这是 HTML
<div id="imagedisplay">
<div class="slider_item active"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item last"></div>
</div>
and the jQuery
和 jQuery
var nextItem = $('.slider_item.active')
.fadeOut()
.removeClass('active')
.next('.slider_item');
if (nextItem.length === 0) {
nextItem = $('.slider_item').first();
}
nextItem.fadeIn().addClass('active');
I saw the jsfiddle link and tried various combination but cant seem to grasp the correct code
我看到了 jsfiddle 链接并尝试了各种组合，但似乎无法掌握正确的代码
Thanks
谢谢
回答by Josh Bedo
I actually just wrote a plugin for this and it's pretty readable so you can probably understand by just looking at it.
我实际上只是为此编写了一个插件，它的可读性很强，因此您只需查看它就可以理解。
Github repo - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js
Github 存储库 - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js
Some of the functionality for arrows is still being worked on to be more dynamic but it works here is an example as well. I'm sliding html but you can easily just add a .slide-panel class with images inside.
箭头的某些功能仍在开发中，以使其更具动态性，但它也是一个示例。我正在滑动 html，但您可以轻松地添加一个带有图像的 .slide-panel 类。
In action http://strikingalchemy.publishpath.com/portfolio
在行动 http://strikingalchemy.publishpath.com/portfolio
EDIT: They edited the script so it doesn't have a setInterval loop the original on github has a interval loop once the user clicks the arrow and is interested to see more. Easily changeable if you want it to loop on load.. I just didn't want to use extra resources when the user wasn't interested. Going to put an example on github later after work.
编辑：他们编辑了脚本，因此它没有 setInterval 循环，一旦用户单击箭头并有兴趣查看更多内容，github 上的原始文件就会有一个间隔循环。如果您希望它在加载时循环，则可以轻松更改.. 我只是不想在用户不感兴趣时使用额外的资源。下班后打算在github上放个例子。
