分享一个JS原生轮播图实例

今天咱们来说一下JS原生轮播图！

话不多说：

直接来代码吧：下面是CSS部分：

*{
    padding: 0px;
    margin: 0px;
   }
   img{
    width: 500px;
    height: 300px;
   }
   li{
    float: left;
   }
   ul{
    width: 2000px;
    list-style: none;
    position: absolute;
   }
   p{
    width: 500px;
    height: 300px;
    /*溢出部分隐藏*/
    overflow: hidden;
    margin: 60px auto;
    position: relative;
   }

HTML部分！

<p>
 <ul>
  <li><img src="img/1.jpg" /></li>
  <li><img src="img/2.jpg"/></li>
  <li><img src="img/3.jpg"/></li>
  <li><img src="img/1.jpg" /></li>
 </ul>
</p>

接下来是JS部分：

就是这么简单！你学会了吗？？

以上就是分享一个JS原生轮播图实例的详细内容，更多请关注Gxl网其它相关文章！