js原生轮播图的实例代码分享

*{
 margin:0px;
 padding: 0px;
 }
 ul{
 width: 2500px;
 height: 300px;
 position: absolute;
 }
 li{
 float: left;
 list-style: none;
 }
 img{
 width: 500px;
 height: 300px;
 }
 p{
 width: 500px;
 height: 300px;
 margin: 50px auto;
 position: relative;
 overflow: hidden;
 
 }
 
/*小白点的ul*/
 #round_ul{
 width:300px;
 height: 30px;
 /*background:yellow;*/
 position: relative;
 margin: 250px auto;
 
 }
 
 #round_ul li{
 width: 20px;
 height:20px;
 border-radius: 50%;
 background: #2196f3;
 margin-left: 50px;
 cursor: pointer;
 
 }

<p>
 <ul>
 <li><img src="img/31.jpg"></li>
 <li><img src="img/32.jpG"></li>
 <li><img src="img/33.jpG"></li>
 <li><img src="img/34.jpg"></li>
 <li><img src="img/31.jpg"></li>
 </ul>
 <ul id="round_ul">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>