关于JQuery和html+css实现带小圆点和左右按钮的轮播图分享

是的！你没看错！还是轮播图。这次的JQuery的哟！！

CSS代码：

/*轮播图 左右按钮 小白点*/
 #second_p{
 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;
 }

HTML代码：

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

js代码：

<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 pW=$(".img_box").width();
 var len=$(".img_box img").length;
 img.css("left",pW);
 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",pW);
 img.eq(index).animate({"left":-pW});
 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",-pW);
 img.eq(index).animate({"left":pW});
 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",-pW);
 img.eq(index).animate({"left":pW});
 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",pW);
 img.eq(index).animate({"left":-pW});
 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>