对于轮播图，之前一直使用的swiper插件，很方便，而且大部分业务场景都适用。想着自己来封装一下，无奈能力一般只能封装一个简易版的轮播图。
    原理：用一个盒子将一个ul列表框起来，只显示一张图片的大小，其他部分隐藏，通过动态改变ul的left值实现图片轮播。(这种模式存在弊端，间隔多张图片之间的轮播会滚动多张图片，不是循环轮播形式)
    css部分代码：

    1. body, div, span, ul, li {
    2.   margin: 0;
    3.   padding: 0;
    4. }
    5. ul, li {
    6.   list-style: none;
    7. }
    8. #carousel { 
    9.     width: 600px;
    10.     height: 400px;
    11.     border: 1px solid #333;
    12.   margin: 200px auto;
    13.     overflow: hidden;
    14.     position: relative;
    15. }
    16. #carousel ul {
    17.     font-size: 0;
    18.     position: absolute;
    19.     left: 0px;
    20.     transition: all 1s;
    21.     -webkit-transition: all 1s;
    22.     -o-transition: all 1s;
    23. }
    24. #carousel ul li {
    25.     display: inline-block;
    26. }
    27. #carousel ul li img {
    28.     width: 600px;
    29.     height: 400px;
    30. }
    31. #carousel .button {
    32.     width: 100%;
    33.   height: 60px;
    34.     background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0)));
    35.     background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    36.     background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    37.     background-image: linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    38.     line-height: 60px;
    39.     position: absolute;
    40.     bottom: 0;
    41.     font-size: 0;
    42.     text-align: center;
    43. }
    44. #carousel .button span {
    45.     display: inline-block;
    46.     width: 15px;
    47.     height: 15px;
    48.     border-radius: 50%;
    49.   background-color: bisque;
    50.     vertical-align: middle;
    51.     margin-left: 30px;
    52. }
    53. #carousel .button span:first-child {
    54.     margin-left: 0;
    55. }
    56. #carousel .button span.on {
    57.     background-color: coral;
    58. }
    59. #carousel .prev {
    60.     position: absolute;
    61.     left: 10px;
    62.     top: 50%;
    63.   color: #333;
    64.   display: inline-block;
    65.     border-top: 4px solid;
    66.     border-right: 4px solid;
    67.     width: 20px;
    68.     height: 20px;
    69.     border-color: #333;
    70.   transform: rotate(-135deg);
    71.     -webkit-transform: rotate(-135deg);
    72.      -o-transform: rotate(-135deg);
    73. }
    74. #carousel .next {
    75.     position: absolute;
    76.     right: 10px;
    77.     top: 50%;
    78.   color: #333;
    79.   display: inline-block;
    80.     border-top: 4px solid;
    81.     border-left: 4px solid;
    82.     width: 20px;
    83.     height: 20px;
    84.     border-color: #333;
    85.   transform: rotate(135deg);
    86.   -webkit-transform: rotate(135deg);
    87.   -o-transform: rotate(135deg);
    88. }

    html部分代码

    1. <div id="carousel">
    2.     <ul class="wrapper">
    3.       <li class="slide">
    4.         <img src="http://img.hb.aicdn.com/6ab520ee7922044f98d8ac67ec1c72f38b55ed86740f5-K6bn9d_fw658" alt="1">
    5.       </li>
    6.       <li class="slide">
    7.         <img src="http://img.hb.aicdn.com/68b8f4013c4a9f39d66c784b24aac7b2ee7dc38557776-niMWxT_fw658" alt="2">
    8.       </li>
    9.       <li class="slide">
    10.         <img src="http://img.hb.aicdn.com/b36c30ddea5ad7cdc5c223707e75fd9905b21456665ed-AM9mG8_fw658" alt="3">
    11.       </li>
    12.       <li class="slide">
    13.         <img src="http://img.hb.aicdn.com/80e3d88de8f7529503fa4c3a6ea5d8c20589ca045f84d-mLCAfa_fw658" alt="4">
    14.       </li>
    15.       <li class="slide">
    16.         <img src="http://img.hb.aicdn.com/3ff657691afda60dbf1958b4dae9f451729be02868187-8CYmGi_fw658" alt="5">
    17.       </li>
    18.       <li class="slide">
    19.         <img src="http://img.hb.aicdn.com/b1bfa6f148d255ee4bf5fe4d75244a84e97ada594cdb5-12kKSr_fw658" alt="6">
    20.       </li>
    21.     </ul>
    22.     <div class="button">
    23.       <span class="on"></span>
    24.       <span></span>
    25.       <span></span>
    26.       <span></span>
    27.       <span></span>
    28.       <span></span>
    29.     </div>
    30.     <span class="prev"></span>
    31.     <span class="next"></span>
    32.   </div>

    js部分代码

    1. window.onload = carouselInit(600, 6, '#carousel', 2000);
    2.   /**
    3.   * 轮播图初始化函数
    4.   * @params {imgWidth} 单张图片宽度数值
    5.   * @params {num} 轮播图中图片总数量
    6.   * @params {id} 轮播图盒子id
    7.   * @params {time} 自动轮播时间间隔
    8.   */
    9.   function carouselInit(imgWidth, num, id, time) {
    10.     if (!imgWidth || !num || !id || !time === true) {
    11.       console.info('参数缺失！！！')
    12.       return false;
    13.     };
    14.     var container = document.querySelector(id)
    15.     var wrapper = container.querySelector('.wrapper');
    16.     var prevNode = container.querySelector('.prev')
    17.     var nextNode = container.querySelector('.next')
    18.     var dots = container.querySelectorAll('.button span')
    19.     var flag = true; // 防止重复点击标识
    20.     var index = 0;
    21.     // 设置ul总宽度
    22.     wrapper.style.width = imgWidth * 6 + 'px';
    23.     /**
    24.     * 滑动到上一张执行函数
    25.     */
    26.     function prev() {
    27.       index--;
    28.       index < 0 ? index = num - 1 : true;
    29.       if (flag) {
    30.         if (window.getComputedStyle(wrapper).left === '0px') {
    31.           wrapper.style.left = -imgWidth * (num - 1) + 'px';
    32.         } else {
    33.           var prevPosition = parseFloat(window.getComputedStyle(wrapper).left) + imgWidth;
    34.           wrapper.style.left = prevPosition + 'px';
    35.         }
    36.         setTimeout(function() {
    37.           flag = true;
    38.           currentDot();
    39.         }, 1000);
    40.       };
    41.     }
    43.     /**
    44.     * 滑到下一张执行函数
    45.     */
    46.     function next() {
    47.       index++;
    48.       index > (num - 1) ? index = 0 : true;
    49.       if (flag) {
    50.         flag = false;
    51.         if (window.getComputedStyle(wrapper).left === -imgWidth * (num - 1) + 'px') {
    52.           wrapper.style.left = '0px';
    53.         } else {
    54.           var nextPosition = parseFloat(window.getComputedStyle(wrapper).left) - imgWidth;
    55.           wrapper.style.left = nextPosition + 'px';
    56.         }
    57.         setTimeout(function() {
    58.           flag = true;
    59.           currentDot();
    60.         }, 1000);
    61.       };
    62.     }
    64.     nextNode.addEventListener('click', function() {
    65.         next();
    66.     });
    67.     prevNode.addEventListener('click', function() {
    68.         prev();
    69.     });
    71.     /**
    72.     * 小圆点变化执行函数
    73.     */
    74.     function currentDot() {
    75.       for (var i = 0; i < dots.length; i++) {
    76.         dots[i].classList.remove('on')
    77.       }
    78.       dots[index].classList.add('on')
    79.     }
    81.     /**
    82.     * 点击小圆点滑动到对应图片
    83.     */
    84.     for (var i = 0; i < dots.length; i++) {
    85.       (function(i) {
    86.         dots[i].addEventListener('click', function() {
    87.           index = i;
    88.           wrapper.style.left = -imgWidth * i + 'px';
    89.           currentDot();
    90.         });
    91.       })(i);
    92.     };
    94.     /**
    95.     * 自动轮播
    96.     */
    97.     var autoPlay = setInterval(function() {
    98.       next()
    99.     }, time);
    101.     /**
    102.     * 鼠标移入轮播图盒子停止轮播
    103.     * 鼠标移出轮播图盒子开始轮播
    104.     */
    105.     container.addEventListener('mouseover', function() {
    106.       clearInterval(autoPlay);
    107.     });
    108.     container.addEventListener('mouseout', function() {
    109.       autoPlay = setInterval(function() {
    110.         next()
    111.       }, time);
    112.     })
    113.   }

    新手封装，欢迎大神指正～～～～