About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons

This article mainly brings you an example of implementing a carousel chart with small dots and left and right buttons using JQuery and html+css. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Yes! You read that right! Still a carousel. This time it’s JQuery! !

CSS code:

/*轮播图 左右按钮 小白点*/
  #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 code:

<!-- 轮播图 -->
<p>
</p><p>
 <img  src="/static/imghwm/default1.png" data-src="img/ban1.jpg" class="lazy" alt="About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons" >
 <img  src="/static/imghwm/default1.png" data-src="img/ban2.jpg" class="lazy" alt="About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons" >
 <img  src="/static/imghwm/default1.png" data-src="img/ban3.jpg" class="lazy" alt="About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons" >
 <img  src="/static/imghwm/default1.png" data-src="img/ban4.png" class="lazy" alt="About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons" >
</p> 
 

 
•  
•  
•  

 

 

>

js code:

<script>
  $(document).ready(function(){
//搜索按钮
 $("#ss").click(function(){
  var new_li = $("<li>"+ $("#skuang").val() +"");
  $("#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>

Related recommendations:

Detailed examples jquery realizes the left and right carousel effect

JS loop carousel

Slider carousel effect with submenus and controls in JavaScript Implementation

The above is the detailed content of About JQuery and html+css to implement carousel image sharing with small dots and left and right buttons. For more information, please follow other related articles on the PHP Chinese website!