我正在尝试创建一张幻灯片,幻灯片的图像淡入淡出,只有我的第一张图像一直保持刷新,有人可以看到我可能出问题的地方吗?
HTML:
<div id="slideshow">
<a href="#"><img src="http://placekitten.com/200/300" class="active"/></a>
<a href="#"><img src="http://placekitten.com/300/400"/></a>
<a href="#"><img src="http://placekitten.com/350/500"/></a>
<a href="#"><img src="http://placekitten.com/370/600"/></a>
</div>
jQuery的:
function slideSwitch() {
var $active = $('#slideshow a IMG.active');
if ($active.length == 0) $active = $('#slideshow a IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow a IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity: 0.0
}).addClass('active').animate({
opacity: 1.0
}, 1000, function() {
$active.removeClass('active last-active');
});
};
$(function() {
setInterval(slideSwitch, 5000);
});
http://jsfiddle.net/eSrcr/1/
最佳答案
问题是因为您在next()
变量上使用了$active
。没有next()
元素,因为每个img
都包含在自己的a
中。
尝试以下方法:
var $next = $active.parent().next("a").find("img").length ? $active.parent().next("a").find("img") : $('#slideshow img:first');
Example fiddle
但是,您需要确保淡出/隐藏上一张图像,因为它们的大小都不同。
关于javascript - 幻灯片幻灯无法循环播放,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10208096/