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");
//向左移动函数
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");
}
}
//向右移动函数
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");
}
/*鼠标划入圆点*/
$(".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");
});
/*自动轮播*/
var t=setInterval(moveL,2000);
/*对banner定时器的操作*/
$(".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>
