jquery 轮播图滚动效果

html
<title>
 <script src="http://s1.bdstatic.com/r/www/cache/static/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
 </title>
 
<div class="banner1">
    <ul>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
        <li class="ima"><img class="ma" src=""></li>
    </ul>
 </div>

 

css

.banner1{
    overflow: hidden;
    margin:50px auto 200px;
    position: relative;
}
.banner1,ul,li{
    height: 874px;
    width: 1440px;
}
.banner1 ul{
    position: absolute;
    top: 0px;
    left: 0px;
}
.banner1 .ima{
    position: absolute;
    float: left;
    display: none;
}
.banner1 .ima .ma{
    display: block;
}

 

js
 var i=0;
    $('.banner1 .ima').eq(i).find('img').attr('src',src+a[i]);
    lunbo1();
   function lunbo1(){
       $('.banner1 .ima').eq(i+1).find('img').attr({src:src+a[i+1]});
       $('.banner1 .ima').eq(i+1).fadeIn(3000).siblings('.ima').fadeOut(2000);
       i++;
       if(i > a.length-1){
           i=0;
           $('.banner1 .ima').eq(i).fadeIn(3000).siblings().fadeOut(2000);
       };
   }
    setInterval(lunbo1,5000);

转载于:https://my.oschina.net/u/2524300/blog/531799