JQuery和html+css怎么实现带小圆点和左右按钮

这篇文章给大家分享的是有关JQuery和html+css怎么实现带小圆点和左右按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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;   }

HTML代码：

<!-- 轮播图 --> <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>

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 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>

感谢各位的阅读！关于“JQuery和html+css怎么实现带小圆点和左右按钮”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！