[英]A simple jQuery slideshow to work for DIV
我刚刚发现可以通过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
制作幻灯片效果(fadeIn / fadeOut)。 例如制作幻灯片
<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/
我创建了一个简单的jQuery插件:
您只需要为元素添加一个父元素,然后将元素的CSS设置为position:absolute;
,并display:none;
插件:
(function($){jQuery.fn.loop = function(d,f){var e=this.children();var el=function(i){if(i==e.length)i=0;e.fadeTo(f,0).eq(i).fadeTo(f,1);setTimeout(function(){el(++i);},d);};el(0);};})(jQuery);
// How to use: $('yourElement').loop( delay , fadespeed );
// Ex: $('#myDiv').loop(2500, 400);
尝试这个
$(function(){
$('.fadein div:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');}, 3000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.