您的位置:首页 > Web前端 > JQuery

jquery 图片自动切换

2014-11-27 10:50 309 查看
示例

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: