我想将jquery脚本优化为多个元素(单页上有很多幻灯片)。 我可以添加一些功能,但这不是DRY(不要重复自己)。
<div id="slideshow">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
答案 0 :(得分:1)
使用class="slideshow"
而不是id="slideshow"
(在CSS中):
$(".slideshow > div:gt(0)").hide();
setInterval(function() {
$('.slideshow').each(function() {
$(this).children('div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(this);
});
}, 3000);