jquery 图片自动切换
示例：
CSS:
.banner-img{position: absolute;}
HTML:
<div class="banner-img">
<div style="background:url(http://www.yooli.com/v2/local/img/banner/runningcoupons.jpg) no-repeat top center;"></div>
<div style="background:url(http://www.yooli.com/v2/local/img/banner/friends.jpg) no-repeat top center;"></div>
<div style="background:url(http://www.yooli.com/v2/local/img/banner/novice.jpg) no-repeat top center;"></div>
<div style="background:url(http://www.yooli.com/v2/local/img/banner/app-download.jpg) no-repeat top center;"></div>
<div style="background:url(http://www.yooli.com/v2/local/img/banner/financing-b.jpg) no-repeat top center;"></div>
</div>
JS:
$(function(){
var n = 4;
setInterval(function(){
if(!$(".banner-img div").eq(n).is(":hidden")){
$(".banner-img div").eq(n).fadeOut("slow");
}else{
$(".banner-img div").eq(n).fadeIn("slow");
}
n--;
if(n == 0){
n = 4;
};
},1000);
});
//图片是引用其他网站的，借用一下
备注：
css样式中必须要加入position:absolute;否则是达不到效果的，就跟普通的图片切换一样，一闪一闪的，图片切换时有点坚硬，这样的效果有柔和的视觉，
fadeOut() 方法是jquery 用于淡出效果，
fadeIn()方法是jquery 用于淡入效果，
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。例：$("p").fadeTo(1000,0.4);1000是指毫秒数，0.4指元素的透明度，参考网址：http://www.w3school.com.cn/jquery/effect_fadeto.asp
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
