css文件
*{padding:0; margin:0;list-style: none;}
.banner{margin:100px auto; border: 5px solid #000; width: 600px; height: 350px; overflow: hidden; position: relative;}
.banner .img{width:5000px;position: absolute; left: 0px;? top:0px;}
.banner .img li{float: left; width: 600px;height: 350px;}
.banner .num {position: absolute; width: 100%; bottom:10px; left: 0; text-align: center;font-size: 0px;}
.banner .num li{width: 10px; height: 10px; background-color: #888; border-radius: 50%; display: inline-block; margin:0 3px; cursor: pointer; }
.banner .num li.on{background-color:#F60;}
.banner .btn{width:30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top:50%; margin-top: -25px; font-size: 40px; text-align: center; line-height: 50px; color: #FFF; font-family: "宋體"; cursor: pointer;display: none;}
.banner:hover .btn{display:block;}
.banner .btn_l{left:0px;}
.banner .btn_r{right:0px;}
js文件
$(function(){
????????var i=0;
????????var clone=$(".banner .img li").first().clone();//克隆第一張圖片
????????$(".banner .img").append(clone);//把克隆好的
????????var size=$(".banner .img li").size();
????????for(var j=0;j
????????????????$(".banner .num").append("<li></li>");
????????}
????????$(".banner .num li").first().addClass("on");
????????//向左移動(dòng)函數(shù)
????????function moveL(){
????????????????i++
????????????????if(i>=size){
????????????????????????$(".banner .img").css({left:0});
????????????????????????i=1;
????????????????}
????????????????$(".banner .img").stop().animate({left:-i*600},500);
????????????????if(i==size-1){
????????????????????????$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
????????????????}else{
????????????????????????$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
????????????????}
????????}
????????//向右移動(dòng)函數(shù)
????????function moveR(){
????????????????i--;
????????????????if(i<0) {
????????????????????????$(".banner .img").css({left:-(size-1)*600})
????????????????????????i=size-2;
????????????????}
????????????????$(".banner .img").animate({left:-i*600},500);
????????????????$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
? ? ? ? ?}
????????/*鼠標(biāo)劃入圓點(diǎn)*/
????????$(".banner .num li").hover(function(){
????????????????????var index = $(this).index();//獲取索引值
????????????????????i=index;
????????????????????$(".banner .img").stop().animate({left:-index*600},500);
????????????????????$(this).addClass("on").siblings().removeClass("on");
????????});
????????/*自動(dòng)輪播*/
????????var t=setInterval(moveL,2000);
????????/*對(duì)banner定時(shí)器的操作*/
????????$(".banner").hover(function(){
????????????????clearInterval(t);
????????},function(){
????????????????t=setInterval(moveL,2000);
????????})
????????/*向左的按鈕*/
????????$(".banner .btn_l").click(moveL);
????????/*向右的按鈕*/
????????$(".banner .btn_r").click(moveR);
});
html文件
<div class="banner">
????????<ul class="img">
????????????????<li><a href="#"><img src="./images/1.jpg" width="100%" height="100%"/></a></li><li
????????????????....
????????????????<li><a href="#" ><img src="./images/1.jpg" width="100%" height="100%" /></a></li>
????????</ul>
????????<ul class="num" ></ul>
????????<div class="btn btn_l" > < </div>
????????<div class="btn btn_r"?> > </div>
</div>
