JavaScript实现轮播图片完整代码

本文实例为大家分享了Javascript实现轮播图片的具体代码，供大家参考，具体内容如下

JS代码注释清晰明了，一看就懂！

 
 
 
 
 * {
 margin: 0;
 padding: 0
 }
 
 .box {
 width: 500px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 padding: 5px;
 }
 
 .inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 }
 
 .inner img {
 width: 500px;
 height: 300px;
 vertical-align: top
 }
 
 ul {
 width: 1000%;
 position: absolute;
 list-style: none;
 left: 0;
 top: 0;
 }
 
 .inner li {
 float: left;
 }
 
 ol {
 position: absolute;
 height: 20px;
 right: 20px;
 bottom: 20px;
 text-align: center;
 padding: 5px;
 }
 
 ol li {
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 background-color: #fff;
 margin: 5px;
 cursor: pointer;
 }
 
 ol .current {
 background-color: red;
 }
 
 

 
 
 
 
 

  

  
  
  

  
  
  

  
  
  

  
  
  

  
  

 
 
 
 
 

精彩专题分享：jQuery图片轮播 Javascript图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。