用jQuery实现轮播banner

在前端发展迅速的今天，很多网站现在都有非常绚丽和时尚的banner图，下面我和大家分享一下运用前两天博客分享的jQuery标签实现动态轮播banner图。

对于初学者来说jQuery的确比JScript代码简洁很多，思路也更为清晰和方便，不得不说在获取元素方面jQuery真的很便捷。

首先不论用JScript或jQuery我们都要先明确思路怎样实现这个效果图，这样组织起来代码就不用来回修改，下面是我个人的文字思路：
定义变量：
轮播ul的li；
轮播图li的length；
定义新变量index=0；
定义函数letsShow(){
轮播的li第eq个.fadeIn(300).兄弟元素.fadeOut(300);
nav的li第eq个.add(‘class名’).兄弟元素.removeClass();
设置动画animate{样式，速度，回调函数
}
还原最初动画
}
定义函数carousel(){
index++；
如果（index等于li的length）{让index==0}
调用letsShow()函数
}
letsShow()
setInterval(carousel,2500)；
以下是我的html结构：
<div id="main">
<div class="pic">
<ul class="list">
<li style="background:url(img/bg1.jpg) no-repeat center">
<img class="img1" src="img/con1.png">
<img class="img2" src="img/text1.png">
</li>
<li style="background:url(img/bg2.jpg) no-repeat center">
<img class="img1" src="img/con2.png">
<img class="img2" src="img/text2.png">
</li>
<li style="background:url(img/bg3.jpg) no-repeat center">
<img class="img1" src="img/con3.png">
<img class="img2" src="img/text3.png">
</li>
<li style="background:url(img/bg4.jpg) no-repeat center">
<img class="img1" src="img/con4.png">
<img class="img2" src="img/text4.png">
</li>
<li style="background:url(img/bg5.jpg) no-repeat center">
<img class="img1" src="img/con5.png">
<img class="img2" src="img/text5.png">
</li>
</ul>
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
css样式：`*{
margin:0;
padding:0;
list-style:none;
}
body{
background:#ccc
}

main{

width:100%;
margin:50px auto
}   

main .pic{

width:760px; 
height:300px;
position:relative;
margin:0 auto;
overflow:hidden;
}

main .pic .list li{

width:760px; 
height:300px;
position:relative;
}

main .pic .list li .img1{

position:absolute;
top:0;
left:-20px;  
display:none;
}

main .pic .list li .img2{

position:absolute;
top:0;
left:-760px;  
}   

main .nav{

position:absolute;
right:20px;
bottom:20px;
}

main .nav li{

width:10px;
height:10px;
border:1px solid #fff;
float:left;
margin-left:5px;
cursor:pointer
}

main .nav li.select{

background:#fff;
}`

下面是jQuery代码，在写代码前伙伴们不要忘记调用jQuery类库：`$(document).ready(function() { var picLi=$(‘.pic .list li’);
var picNum=picLi.size();
var index=0;
function letsShow(){
picLi.eq(index).fadeIn(300).siblings().fadeOut(300);
$(‘.nav li’).eq(index).addClass(‘select’).siblings().removeClass(‘select’);
picLi.eq(index).find(‘.img2’).animate({left:’0px’},1000,function(){
picLi.eq(index).find(‘.img1’).css({‘display’:’block’}).animate({left:’0px’},1000)
})
picLi.eq(index).prev().find(‘.img2’).css({left:’-760px’}) //
picLi.eq(index).prev().find(‘.img1’).css({left:’-20px’,display:’none’})//
}
function carousel(){
index++;
if(index==picNum){
index=0;
}
letsShow();
}
letsShow();
var id =setInterval(carousel,2500)

$('.nav li').click(function(){
    clearInterval(id);
    var i = $(this).index();
    index = i;

    letsShow();
    id = setInterval(carousel, 2500);
    })

});`