[英]javascript for auto image slider with html5
The following code is my html page for image slider but it will not continue after sliding last image. 以下代码是我的图像滑块的html页面,但在滑动最后一个图像后它不会继续。
<style type="text/css">
#slideshow {
position:relative;
height:300px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>'
<script>
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>'
<body>
<div id="slideshow" style="height:300px; width:100%">
<img src="${context:layout/images/images.jpeg}" title="Funky roots" style="position:absolute; height:300px; width:100%;" class="active"/>
<img src="${context:layout/images/police.jpg}" title="The long and winding road" style="position:absolute; height:300px; width:100%;"/>
<img src="${context:layout/images/viper_1.jpg}" title="Happy trees" style="position:absolute; height:300px; width:100%;"/>
</div>
</body>
From this code, how can I get auto sliding and continue to next slide after a last image? 从这段代码中,如何在最后一张图像后自动滑动并继续下一张幻灯片?
You dont add the last-active
class to the last element. 您不要将last-active
类添加到last-active
一个元素。 So every element has the active
class and every element has z-index: 10
所以每个元素都有active
类,每个元素都有z-index: 10
After some work on the code got this new JS for you: 在对代码进行一些工作之后,为您获得了这个新的JS:
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$active.addClass('last-active');
$active.removeClass('active');
if($next.length == 0) {
$next = $('div#slideshow IMG').first(); //at the end we need to select the first element, because there is no next()
}
$next.removeClass('last-active');
$next.addClass('active');
}
EDIT: 编辑:
TO answer your comment: 回答你的评论:
After the first round through your slider the classes look like this: 通过滑块的第一轮后,类看起来像这样:
<img ... class="last-active"/>
<img ... class="last-active"/>
<img ... class="active"/>
When we enter the code $active
contains the last div
and $next
is empty, because there is no next element. 当我们输入代码时, $active
包含最后一个div
而$next
是空的,因为没有下一个元素。
At this point we have to tell the code, that the next element will be the first one. 此时我们必须告诉代码,下一个元素将是第一个元素。 The $next = $('div#slideshow IMG').first();
$next = $('div#slideshow IMG').first();
just select the first div where we want to start over. 只需选择我们想重新开始的第一个div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.