无限循环轮播图之结构布局（原生JS）

html部分

 <div class="box" id="box">
         <ul>
             <li><img src="data:images/0.jpg" alt=""></li>
             <li><img src="data:images/1.jpg" alt=""></li>
             <li><img src="data:images/2.jpg" alt=""></li>
             <li><img src="data:images/3.jpg" alt=""></li>
             <li><img src="data:images/4.jpg" alt=""></li>
         </ul>
         <ol id="btn">
             <li class="on"></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ol>
         <a href="javascript:;" id="prev">&laquo;</a>
         <a href="javascript:;" id="next">&raquo;</a>
  </div>

CSS 部分

     <style>
         *{
             margin:;
             padding:;
             list-style: none;
         }
         a {
             text-decoration: none;
         }
         img{
             vertical-align: top;
         }
         .box{
             position: relative;
             width: 400px;
             height: 224px;
             margin: 100px auto;
             border:1px solid red;
             overflow: hidden;
         }
         .box ul {
             position: relative;
         }
         .box ul li{
             position: absolute;
             left: 400px;
             top:;
         }
         .box ul img{
             width: 400px;
             height: 224px;
         }
         .box ol {
             position:absolute;
             left: 50%;
             bottom:20px;
             margin-left: -75px;
             overflow: hidden;
         }
         .box ol li{
             float: left;
             width: 20px;
             height: 20px;
             border-radius: 10px;
             background: #00925f;
             margin: 5px;
             -webkit-transition: 1s ease all;
             -moz-transition: 1s ease all;
             -ms-transition: 1s ease all;
             -o-transition: 1s ease all;
             transition: 1s ease all;

         }
         #prev {
             position: absolute;
             font-size: 50px;
             top: 50%;
             left: 5px;
             margin-top: -50px;
             height: 100px;
             line-height: 100px;
             text-align: center;

             -webkit-transition: 1s all ease ;
             -moz-transition: 1s all ease ;
             -ms-transition: 1s all ease ;
             -o-transition: 1s all ease ;
             transition: 1s all ease ;

         }
         #prev:hover{
             color: yellow;
             left:;
         }
         #next {
             position: absolute;
             font-size: 50px;
             top: 50%;
             right: 5px;
             margin-top: -50px;
             height: 100px;
             line-height: 100px;
             text-align: center;
             -webkit-transition: 1s all ease;
             -moz-transition: 1s all ease;
             -ms-transition: 1s all ease;
             -o-transition: 1s all ease;
             transition: 1s all ease;

         }
         #next:hover {
             color: yellow;
             right: 0
         }
         .box .on {
             background: yellow;
         }
     </style>