纯原生JS大图轮播

CSS部分：

 CSS：
 <style type="text/css">
 #banner {
 position: relative;
 width: 500px;
 height: 300px;
 margin: 0 auto;
 border: 1px solid black;
 overflow: hidden;
 }

 #banner_move {
 position: relative;
 top: 0px;
 left: 0px;
 height: 300px;
 width: 5000px;
 background-color: #eee;
 }

 #banner_move img {
 width: 500px;
 height: 300px;
 float: left;
 }

 #banner_btnleft {
 position: absolute;
 left: 0px;
 top: 50%;
 margin-top: -40px;
 width: 50px;
 height: 80px;
 background-color: rgba(0,0,0,0.4);
 z-index:;
 text-align: center;
 line-height: 80px;
 font-size: 40px;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 display: none;
 }

 #banner_btnright {
 position: absolute;
 right: 0px;
 top: 50%;
 margin-top: -40px;
 width: 50px;
 height: 80px;
 background-color: rgba(0,0,0,0.4);
 z-index:;
 text-align: center;
 line-height: 80px;
 font-size: 40px;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 display: none;
 }

 #banner_btns {
 position: absolute;
 bottom: 10px;
 height: 21px;
 background-color: rgba(0,0,0,0.7);
 border-radius: 15px;
 }

 .banner_btns_item {
 width: 13px;
 height: 13px;
 background-color: #fff;
 border-radius: 20px;
 float: left;
 margin: 4px;
 }
 </style>

HTML部分：

 <div id="banner">
      <div id="banner_btnleft" onselectstart="return false"><</div>
      <div id="banner_btnright" onselectstart="return false">></div>
           <div id="banner_move">    //这里可以插入任意几张图片
               <img src="imgs/1.jpg" />
               <img src="imgs/2.jpg" />
               <img src="imgs/3.jpg" />
           </div>
           <div id="banner_btns">
           </div>
 </div>

JS部分：

 <script type="text/javascript">
     var timer1;
     var timer2;
     var bannerNow = 1;
     var bannerSpeed = 10;
     var oMove = document.getElementById('banner_move');
     var oLeft = document.getElementById("banner_btnleft");
     var oRight = document.getElementById("banner_btnright");
     var oBanner = document.getElementById('banner');
     var aa = document.getElementById('aaa');

     oLeft.onclick = function () {
         bannerNow -= 1;
         if (bannerNow < 1) bannerNow = oMove.getElementsByTagName("img").length;
         StartMove(bannerNow);
     }

     oRight.onclick = function () {
         bannerNow += 1;
         if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
         StartMove(bannerNow);
     }

     oBanner.onmouseover = function () {
         StopAutoMove();
         oLeft.style.display = 'block';
         oRight.style.display = 'block';
     }

     oBanner.onmouseout = function () {
         AutoMove();
         oLeft.style.display = '';
         oRight.style.display = '';
     }

     AutoMove();

     for (var i = 0; i < oBanner.getElementsByTagName('img').length; i++) {
         if (i == 0) document.getElementById("banner_btns").innerHTML += '<div style="background-color:red;" class="banner_btns_item"></div>';
         else document.getElementById("banner_btns").innerHTML += '<div class="banner_btns_item"></div>';
     }
     document.getElementById("banner_btns").style.left = "50%";
     document.getElementById("banner_btns").style.marginLeft = '-' + (document.getElementById("banner_btns").offsetWidth / 2) + 'px';

     var oBbtns = document.getElementsByClassName('banner_btns_item');
     for (var i = 0; i < oBbtns.length; i++) {
         oBbtns[i].index = i + 1;
         oBbtns[i].onclick = function () {
             bannerNow = this.index;
             StartMove(bannerNow);
         }
     }

     //轮播方法，参数为你要看的页数
     function StartMove(ind) {
         window.clearInterval(timer1); //不管有没有启动定时器，都清空一下，为了保证同时只存在一个定时工作
         timer1 = window.setInterval(function () {
             var finish = (ind - 1) * -500; //计算目标位置

             var btns = document.getElementsByClassName('banner_btns_item');
             for (var i = 0; i < btns.length; i++) {
                 btns[i].style.backgroundColor = '';
             }
             btns[ind - 1].style.backgroundColor = 'red';

             //计算速度，实现缓冲
             bannerSpeed = Math.ceil(Math.abs((Math.abs(finish) - Math.abs(oMove.offsetLeft)) / 10));

             //判断是否结束或是移动方向
             if (oMove.offsetLeft == finish) { //结束，停掉定时器
                 window.clearInterval(timer1);
             }
             else { //未结束，继续移动
                 if (oMove.offsetLeft > finish) //判断是否向右走
                     oMove.style.left = oMove.offsetLeft - bannerSpeed + 'px';
                 else //判断是否向左走
                     oMove.style.left = oMove.offsetLeft + bannerSpeed + 'px';
             }
         }, 20);
     }

     //开启自动播放功能
     function AutoMove() {
         window.clearInterval(timer2);
         timer2 = window.setInterval(function () {
             bannerNow = bannerNow + 1;
             if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
             StartMove(bannerNow);
         }, 2000);
     }

     //停止自动播放功能
     function StopAutoMove() {
         window.clearInterval(timer2);
     }

 </script>