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>

 <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>

 <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>