用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);
})

});`