我在尝试制作 super 简单的幻灯片时遇到了问题。我不明白为什么它不起作用。第一张图片出现但没有循环显示。
这是 JSFiddle:http://jsfiddle.net/cydonknight/kyhxy/
和 JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("rotateImages()", 2000 );
});
function rotateImages(){
var $onCurrent= $('#imageSlider div.current') ;
var $onNext= $onCurrent.next().length ? $onCurrent.next();
: $('#imageSlider div:first');
if (!onNext.length )
onNext=$("#imageSlider div:first");
$onCurrent.addClass('previous');
$onNext.css({opacity: 0.0}).addClass('current').animate({opacity:1.0}, 2000, function() {
$onCurrent.removeClass(' previous');
});
}
</script>
如有任何帮助,我们将不胜感激!
最佳答案
它现在正在工作。实际上我做了很多改变。
你更新的fiddle
setInterval(rotateImages, 2000);
function rotateImages()
{
var $onCurrent= $('#imageSlider div.current') ;
var $onNext= $onCurrent.next().length ? $onCurrent.next() : $('#imageSlider div:first');
if (!$onNext.length )
$onNext=$("#imageSlider div:first");
$("#imageSlider div").removeClass("current").css("opacity", 0);
$onNext.addClass('current').animate({opacity:1.0}, 1000);
}
关于JQuery:简单幻灯片的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13716970/