1. // index.html
    2.     ...
    3.     <div class="demo">
    4.         <ul id="bannerWrap">
    5.             <li class="bannerItem"><a href=""><img src="" /></a></li>
    6.             <li class="bannerItem"><a href=""><img src="" /></a></li>
    7.             <li class="bannerItem"><a href=""><img src="" /></a></li>
    8.             <li class="bannerItem"><a href=""><img src="" /></a></li>
    9.         </ul>
    10.         <ul id="pointsWrap">
    11.             <li class="pointItem on"></li>
    12.             <li class="pointItem"></li>
    13.             <li class="pointItem"></li>
    14.             <li class="pointItem"></li>
    15.         </ul>
    16.     </div>
    17.         ...
    2. // banner.css
    3. //轮播图 ul 建议采用flex布局
    4. #bannerWrap {
    5.     width: 100%;
    6.     display: flex;
    7. }
    8. .bannerItem{
    9.     flex: 0 0 100%;
    10.     align-items: center;
    11. }
    2. // main.js中使用
    4. BSlider({
    5.     checkTime: 3000,
    6.     transTime: 600,
    7.     bannerWrap: '#bannerWrap',
    8.     childBanner: '.bannerItem',
    9.     points: '.pointItem',
    10.     pointOn: 'on'
    11. });
    14. // BSlider.js
    15. /*  @name: BSlider.js
    16. *   @version: 1.1.0
    17. *   @author: liyang
    18. *   @Created: 2016-12-27
    19. *   @Edited: 2017-03-07
    20. *   @description 轮播图组件
    21. *   @params: {
    22. *        checkTime:     [Number],     //轮播图切换频率，单位ms，选填，默认值 3000
    23. *        transTime:     [Number],     //轮播图过渡频率，单位ms，选填，默认值 500
    24. *        bannerWrap:    [String],     //轮播图父容器选择器（例如'#bannerWrap')，必填
    25. *        childBanner:   [String],     //轮播图子图选择器，必填
    26. *        points:        [String],     //焦点圆钮选择器，必填
    27. *        pointOn:       [String]      //焦点激活类名，必填
    28. *   }
    29. */
    30. (function(name, def) {
    31.     //检测上下文环境是否为AMD或者CMD
    32.     var hasDefine = typeof define === 'function',
    33.         hasExports = typeof module !== 'undefined' && module.exports;
    34.     if (hasDefine) {
    35.         // AMD环境或CMD环境
    36.         define(def);
    37.     } else if (hasExports) {
    38.         //定义为普通Node模块
    39.         module.exports = def();
    40.     } else {
    41.         //将模块的执行结果挂在window变量中，在浏览器中this指向window对象
    42.         this[name] = def();
    43.     }
    44. })('BSlider', function() {
    45.     var BSlider = function(o) {
    46.         var defaults = {
    47.             checkTime: 2000,
    48.             transTime: 500,
    49.             bannerWrap: '',
    50.             childBanner: '',
    51.             points: '',
    52.             pointOn: ''
    53.         };
    54.         for (key in o) {
    55.             defaults[key] = o[key];
    56.         }
    57.         var bw = defaults.bannerWrap,
    58.             cb = defaults.childBanner,
    59.             pts = defaults.points,
    60.             ptOn = defaults.pointOn;
    62.         //bannerWrap, childBanner, points, pointOn必填
    63.         if (o === null || typeof o !== 'object' || !bw || !cb || !pts || !ptOn) {
    64.             throw new Error('【 bannerWrap, childBanner, points, pointOn are necessary 】');
    65.             return false;
    66.         }
    67.         //轮播图父容器
    68.         var bannerBox = document.querySelector(defaults.bannerWrap),
    69.             width = bannerBox.offsetWidth,
    70.             //轮播图 子图
    71.             banners = bannerBox.querySelectorAll(defaults.childBanner),
    72.             //圆点 && 计时器
    73.             timer,
    74.             count = 1,
    75.             checkTime = defaults.checkTime,
    76.             transTime = defaults.transTime,
    77.             points = document.querySelectorAll(defaults.points),
    78.             //触摸点
    79.             moveX = 0,
    80.             startX = 0,
    81.             distanceX = 0,
    82.             //判断是否滑动
    83.             isMove = false;
    85.         // 轮播对象
    86.         var Bn = {
    87.             doInit: function() {
    88.                 Bn.initBannerImg();
    89.                 Bn.setTimer();
    90.                 Bn.TOUCH();
    91.             },
    92.             //混合器
    93.             _extend: function(targetObj, utilObj) {
    94.                 for (key in utilObj) {
    95.                     targetObj[key] = utilObj[key];
    96.                 }
    97.             },
    99.             //初始化轮播图数量
    100.             initBannerImg: function() {
    101.                 Bn.setTranslateX(bannerBox, -count * width);
    103.                 var cloneFirst = banners[0].cloneNode(true);
    104.                 var cloneLast = banners[banners.length - 1].cloneNode(true);
    106.                 //复制第一张放末尾，复制最后一张放最前
    107.                 bannerBox.appendChild(cloneFirst);
    108.                 bannerBox.insertBefore(cloneLast, bannerBox.childNodes[0]);
    110.                 Bn.setTranslateX(bannerBox, -count * width);
    111.             },
    113.             //监听过渡结束
    114.             transitionEnd: function(el, cb) {
    115.                 if (el && typeof el === 'object') {
    116.                     el.addEventListener('webkitTransitionEnd', function() {
    117.                         cb && cb();
    118.                     })
    119.                     el.addEventListener('transitionEnd', function() {
    120.                         cb && cb();
    121.                     })
    122.                 }
    123.                 //解除禁止页面上下滚动
    124.                 document.querySelector('body').removeEventListener('touchstart', Bn.forbidScroll);
    125.             },
    127.             //添加过渡
    128.             addTransition: function(el) {
    129.                 var cs1 = {
    130.                     webkitTransition: "all " + transTime + "ms",
    131.                     transition: "all " + transTime + "ms"
    132.                 }
    133.                 Bn._extend(el.style, cs1);
    134.             },
    135.             //删除过渡
    136.             removeTransition: function(el) {
    137.                 var cs2 = {
    138.                     webkitTransition: "none",
    139.                     transition: "none"
    140.                 }
    141.                 Bn._extend(el.style, cs2);
    142.             },
    143.             //设置位移
    144.             setTranslateX: function(el, w) {
    145.                 var cs3 = {
    146.                     webkitTransform: "translateX(" + w + "px)",
    147.                     transform: "translateX(" + w + "px)"
    148.                 }
    149.                 Bn._extend(el.style, cs3);
    150.             },
    152.             //初始化定时器
    153.             setTimer: function() {
    154.                 timer = setInterval(function() {
    155.                     count++;
    156.                     //开始轮播
    157.                     Bn.addTransition(bannerBox);
    158.                     Bn.setTranslateX(bannerBox, -count * width);
    159.                     Bn.setPoint();
    160.                 }, checkTime);
    162.                 Bn.transitionEnd(bannerBox, function() {
    163.                     //设置当前点
    164.                     Bn.getCount();
    165.                     //动画结束刷新状态
    166.                     Bn.removeTransition(bannerBox);
    167.                     Bn.setTranslateX(bannerBox, -count * width);
    168.                 });
    169.             },
    170.             //限制当前 count
    171.             getCount: function() {
    172.                 if (count >= points.length + 1) {
    173.                     count = 1;
    174.                 } else if (count <= 0) {
    175.                     count = points.length;
    176.                 }
    177.             },
    178.             hasClass: function(el, cls) {
    179.                 cls = cls || '';
    180.                 if (cls.replace(/\s/g, '').length == 0)
    181.                     return false; //当cls没有参数时，返回false
    182.                 return new RegExp(' ' + cls + ' ').test(' ' + el.className + ' ');
    183.             },
    184.             addClass: function(el, cls) {
    185.                 if (!Bn.hasClass(el, cls)) {
    186.                     el.className = el.className == ''
    187.                         ? cls
    188.                         : el.className + ' ' + cls;
    189.                 }
    190.             },
    191.             removeClass: function(el, cls) {
    192.                 if (Bn.hasClass(el, cls)) {
    193.                     var newClass = ' ' + el.className.replace(/[\t\r\n]/g, '') + ' ';
    194.                     while (newClass.indexOf(' ' + cls + ' ') >= 0) {
    195.                         newClass = newClass.replace(' ' + cls + ' ', ' ');
    196.                     }
    197.                     el.className = newClass.replace(/^\s+|\s+$/g, '');
    198.                 }
    199.             },
    200.             //点动
    201.             setPoint: function() {
    202.                 var arrs = [];
    203.                 for (var i = 0; i < points.length; i++) {
    204.                     arrs.push(points[i]);
    205.                 }
    206.                 arrs.forEach(function(v, i) {
    207.                     Bn.removeClass(v, 'on');
    208.                     // v.className = "";
    209.                 })
    210.                 Bn.getCount();
    211.                 Bn.addClass(arrs[count - 1], defaults.pointOn);
    212.                 // arrs[count - 1].className = defaults.pointOn;
    213.             },
    214.             //触摸焦点图时禁止页面滚动
    215.             forbidScroll: function(evt) {
    216.                 evt.preventDefault();
    217.             },
    218.             TOUCH: function() {
    220.                 bannerBox.addEventListener('touchstart', function(e) {
    221.                     //禁止页面滑动
    222.                     document.querySelector('body').addEventListener('touchstart', Bn.forbidScroll);
    223.                     //清除定时器
    224.                     clearInterval(timer);
    225.                     startX = e.touches[0].clientX;
    226.                 });
    228.                 bannerBox.addEventListener('touchmove', function(e) {
    229.                     isMove = true;
    230.                     moveX = e.touches[0].clientX;
    231.                     distanceX = moveX - startX;
    233.                     Bn.removeTransition(bannerBox);
    234.                     Bn.setTranslateX(bannerBox, -count * width + distanceX);
    235.                 });
    237.                 bannerBox.addEventListener('touchend', function(e) {
    238.                     //滑动距离超过十分之一屏即切换，否则回弹
    239.                     if (Math.abs(distanceX) > (width / 10) && isMove) {
    240.                         if (distanceX > 0) {
    241.                             count--;
    242.                         } else {
    243.                             count++;
    244.                         }
    245.                     }
    246.                     Bn.addTransition(bannerBox);
    247.                     Bn.setTranslateX(bannerBox, -count * width);
    249.                     //重置参数
    250.                     startX = moveX = distanceX = 0;
    251.                     isMove = false;
    253.                     //重置状态
    254.                     clearInterval(timer);
    255.                     Bn.setTimer();
    256.                     Bn.setPoint();
    257.                 });
    258.             }
    259.         }
    260.         Bn.doInit();
    261.     }
    262.     return BSlider;
    263. })