我已经按照http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/的说明构建了我的自动幻灯片
js看起来像这样:
setInterval(function () {
$('#singleSlideshow #slideItem:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#singleSlideshow');
}, 3000);
这适用于内容区域,只有一个元素可以淡入/淡出,例如:
<div id="slideShow">
<img src="www.pictures.com/somepic.png"/>
<img src="www.pictures.com/anotherpic.png"/>
<img src="www.pictures.com/theonepic.png"/>
</div>
但我想在我的页面上放另一个幻灯片,在结构化元素之间切换。
<div id="newsItem">
<img class="newsImg" src="./somepic"/>
<div id="newsTitle">Testnews 1</div>
<div id="newsDate">01.01.2014</div>
<div id="newsText">this is the first news text...</div>
</div>
你可以在这里看到它:http: //jsfiddle.net/ehLdW/4/
---编辑---我玩了一下以解决脚本中的错误...我将脚本更改为以相反的顺序工作
setInterval(function () {
$('#singleSlideshow #slideItem:last')
.fadeOut(1000)
.prev()
.fadeIn(1000)
.end()
.prependTo('#singleSlideshow');
}, 3000);
问题还是一样 - 没有交叉淡入淡出效果,但只有一个淡入淡出动画。有趣的是,原始版本只显示了新元素的淡入淡出过渡,相反,相反的顺序版本只显示了当前元素的淡出过渡。
所以它总是显示元素的效果,索引越高我不知道如何解决这个问题......