我刚刚发现可以通过 jQuery 制作一个非常简单的幻灯片
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
与
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
我想知道如何修改这个简单的代码来为 DIV 而不是 img
制作幻灯片效果(淡入/淡出)。例如制作幻灯片
<div class="fadein">
<div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">Some text</div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">Some text</div>
<div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">Some text</div>
</div>
最佳答案
我写了一些代码:
$(function(){
$ds = $('.fadein div');
$ds.hide().eq(0).show();
setInterval(function(){
$ds.filter(':visible').fadeOut(function(){
var $div = $(this).next('div');
if ( $div.length == 0 ) {
$ds.eq(0).fadeIn();
} else {
$div.fadeIn();
}
});
}, 3000);
});
您可以在这里找到完整的示例代码:http://jsfiddle.net/h58ng/
关于javascript - 适用于 DIV 的简单 jQuery 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8253759/