JQuery和html+css实现带小圆点和左右按钮的轮播图实例

/*轮播图 左右按钮 小白点*/  #second_div{  margin-top: 160px;  }  .img_box{  overflow: hidden;  width:100%;  height:420px;  border:1px solid;  position:relative; }    .img_box img{  width:100%;  position:absolute; }    .ul5{  list-style: none;  position:absolute;  left:580px;  top:565px;  }   .ul5 li{  float:left;  margin-left:20px;  width:40px;  height:5px;  border:0px;  background:lawngreen; }  .d1,.d2{  width:50px;  height:60px;  background-color: rgba(10,10,10,0.5);  text-align: center;  font-size:26px;  font-weight: 800px;  line-height:60px;  cursor: pointer;  }  .d1{  position:absolute;  top:373px;  left:25px;  }  .d2{  position:absolute;  top:373px;  left:1445px;  }

<!-- 轮播图 --><div id="second_div"><div class="img_box"> <img src="img/ban1.jpg"> <img src="img/ban2.jpg"> <img src="img/ban3.jpg"> <img src="img/ban4.png"></div>  <ul class="ul5"> <li></li> <li></li> <li></li> <li></li></ul> <div class="d1"><</div> <div class="d2">></div></div>

<script type="text/javascript">  $(document).ready(function(){//搜索按钮 $("#ss").click(function(){  var new_li = $("<li>"+ $("#skuang").val() +"</li>");  $("#d1 ul").append(new_li);  $("#d1").hide();  $("#skuang").val("");  })  $("#skuang").focus(function(){   $("#d1").css("display","block");  });    $("#skuang").blur();  $("#qingch").click(function(){   $("#d1 li:gt(0)").remove();   $("#d1").hide();     });//轮播图  var img=$(".img_box img");  var li=$(".ul5 li");  var divW=$(".img_box").width();  var len=$(".img_box img").length;  img.css("left",divW);  img.eq(0).css("left",0);  li.eq(0).css("background","red");  var index=0;  var next=0;  function show(){   next++;   if(next==len){    next=0;   }   img.eq(next).css("left",divW);   img.eq(index).animate({"left":-divW});   img.eq(next).animate({"left":0});   li.eq(next).css("background","red");   li.eq(index).css("background","lawngreen");   index=next;  }  t=setInterval(show,2000);  function show1(){   next--;   if(next==-1){    next=len-1;   }   img.eq(next).css("left",-divW);   img.eq(index).animate({"left":divW});   img.eq(next).animate({"left":0});   li.eq(next).css("background","red");   li.eq(index).css("background","lawngreen");   index=next;       }  img.hover(function(){   clearInterval(t);       },function(){   t=setInterval(show,2000);  })  //左右按钮  $(".d2").mousedown(function(){   clearInterval(t);   show();  })  $(".d2").mousedown(function(){     t=setInterval(show,2000);  })   $(".d1").mousedown(function(){   clearInterval(t);     show1();  })  $(".d1").mousedown(function(){   t=setInterval(show,2000);  })  //小白点 点击  li.mousedown(function(){   num=$(this).index();   if(num==next){    return;   }else if(num<next){    clearInterval(t);    img.eq(num).css("left",-divW);     img.eq(index).animate({"left":divW});     img.eq(num).animate({"left":0});     li.eq(num).css("background","red");     li.eq(index).css("background","lawngreen");     index=num;     next=num;   }else if(num>next){    clearInterval(t);     img.eq(num).css("left",divW);     img.eq(index).animate({"left":-divW});     img.eq(num).animate({"left":0});     li.eq(num).css("background","red");     li.eq(index).css("background","lawngreen");     index=num;     next=num;   } })    li.mouseup(function(){     t=setInterval(show,2000);   })  }) </script>