使用jQuery创建图像滑块时出现问题
[英]Issue while creating image slider using jquery
问题描述
I created an image slider using jquery. 
我使用jquery创建了一个图像滑块。 I am getting the output perfectly but my problem is that it runs the single cycle ie if there are 4 images then after the last image it stops I want to make it cyclic that is after the last image slider should display the first image. 我得到的输出是完美的，但我的问题是它运行单个周期，即如果有4张图像，则在最后一张图像之后停止，我想使其循环，即在最后一张图像滑块应显示第一张图像之后。
My code is: 我的代码是：
<style type="text/css">
.active{
z-index:99;
}
</style>
<html>
<head>
</head>
<body>
<div id="slideshow">
<img src="1.jpg" style="position:absolute;" class="active" />
<img src="2.jpg" style="position:absolute;" />
<img src="3.jpg" style="position:absolute;" />
</div>
</body>
<script src="jquery-1.10.1.min.js"></script>
<script>
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval( "slideSwitch()", 2000 );
/*if($('#slideshow:last-child').hasClass('active'))
{
alert("Complete");
}*/
});
</script>
</html>
What should I do to run the slider in cyclic mode. 我应该怎么做才能在循环模式下运行滑块。
The reason behind applying this simple slider is that I want further customize the slider. 应用此简单滑块的原因是我想进一步自定义滑块。
3 个解决方案
解决方案1
1 已采纳 2013-11-14 07:38:25
Try this code:- 试试这个代码：
function slideSwitch() {
var $active = $('div#slideshow img.active'),
$next;
if($('div#slideshow img.active').is(':last-child'))
{
$next = $('div#slideshow img').first(); // get the first image
}else{
$next = $active.next();
}
$next.addClass('active');
$active.removeClass('active');
}
解决方案2
1 2013-11-14 07:38:48
Try this: 尝试这个：
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
if($next.length == 0) $next = $('div#slideshow IMG:first');
$next.addClass('active');
$active.removeClass('active');
}
解决方案3
1 2013-11-14 07:42:24
Here you go: 干得好：
JS Fiddle: http://jsfiddle.net/3wAxB/ JS小提琴： http : //jsfiddle.net/3wAxB/
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
if($next.length==0){
$next=$('#slideshow img').first();
}
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval(slideSwitch, 2000 );
});
Also check out my answer to this question, it might be of use to you: Very short jQuery Image Slideshow 还要查看我对这个问题的答案，它可能对您有用： 非常短的jQuery图像幻灯片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.