我按照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);
问题仍然相同 - 没有交叉淡入淡出效果,但只有一个淡入淡出动画。 有趣的是,原始版本只显示了新元素的fadeIn过渡 相反,逆序版本仅显示当前元素的fadeOut转换。
所以它总是显示元素的效果,索引越高 我对如何解决这个问题一无所知...
答案 0 :(得分:1)
假设我理解你想要什么,你想在同一页面上有2个幻灯片,具有不同的时间/转换时间,每个都需要显示它自己独立的混合内容(图像和/或其他div)。
JSFIDDLE演示Here
HTML:
<div id="slideshow1">
<div>
<div style="color:red;">Content in first child of slideshow1</div>
<div style="color:blue;">More content in first child of slideshow1</div>
</div>
<div>
Content in second child of slideshow1
</div>
<div>
Content in third child of slideshow1
</div>
</div>
<div id="slideshow2">
<div>
<div style="color:red;">Content in first child of SLIDSHOW2</div>
<div style="color:blue;">More content in first child of SLIDESHOW2</div>
</div>
<div>
Content in second child SLIDESHOW2
</div>
<div>
Content in third child SLIDESHOW2
</div>
</div>
JQUERY:
$("#slideshow1 > div:gt(0)").hide();
setInterval(function() {
$('#slideshow1 > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow1');
}, 3000);
$("#slideshow2 > div:gt(0)").hide();
setInterval(function() {
$('#slideshow2 > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow2');
}, 4500);
CSS:
#slideshow1 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow1 > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow2 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow2 > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}