<div class="banner"> <ul class="img">  <li><a href="#"><img src="image/1.jpg"></a></li>  <li><a href="#"><img src="image/2.jpg"></a></li>  <li><a href="#"><img src="image/3.jpg"></a></li>  <li><a href="#"><img src="image/4.jpg"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div></div>

$(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<size-1;j++){  $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass('on'); //鼠標(biāo)劃入圓點(diǎn) $(".banner .num li").hover(function(){  var index=$(this).index();  i=index;  $(".banner .img").stop().animate({left:-index*1000},500);  $(this).addClass('on').siblings().removeClass('on'); }) /*自動(dòng)輪播*/ var t=setInterval(function(){  i++;  move(); },2000); //對banner定時(shí)器的操作 $(".banner").hover(function(){  clearInterval(t); },function(){  t=setInterval(move,2000); }) /*向左按鈕*/ $(".banner .btn_l").click(function(){  i++;  move(); }) /*向右按鈕*/ $(".banner .btn_r").click(function(){  i--;  move(); }) function move(){  if(i==size){   $(".banner .img").css({left:0});   i=1;  }  if(i==-1){   $(".banner .img").css({left:-(size-1)*1000});   i=size-2;  }  $(".banner .img").stop().animate({left:-i*1000},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');  } }})

<style>*{padding:0;margin:0;list-style: none;}.banner{ margin:100px auto;  border:5px solid #000;  width:1000px; height:640px; position: relative; overflow: hidden;}.banner .img{ width:5000px; position: absolute; left:0px; top:0px;}.banner .img li{ float:left;}.banner .num{ position:absolute; width:100%; bottom:20px; left:0px; text-align: center; font-size: 0px;}.banner .num li{ width:10px; height:10px; background: #888; border-radius: 50%; display: inline-block; margin:0 3px; cursor: pointer;}.banner .num li.on{ background: #f00;}.banner .btn{ width:30px; height:50px; background: rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor: pointer; text-align: center; line-height: 50px; color:#fff; font-size: 40px; font-family: "宋體"; display: none;}.banner:hover .btn{ display: block;}.banner .btn_l{ left:0px;}.banner .btn_r{ right:0px;}</style>