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:

 
 
     
 
 
 
 
 
 
 
<
 
>
 

js code:

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!