jquery 图片自动切换

标签：style   http   io   ar   color   os   sp   strong   on   

示例：

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

jquery 图片自动切换

标签：style   http   io   ar   color   os   sp   strong   on   

原文地址：http://www.cnblogs.com/jingzhou/p/4125836.html