一款轮播插件的诞生

qianfeng 发布于2019-08-23 14:21 / 1498人阅读

摘要：同理，向左轮播至第一张图片时，也会取消后轮播图定位至第六张图片而后再度开启。续判断是否开启自动轮播，如是则自动轮播加入事件监听监听鼠标移入事件，当鼠标移入的时候，停止自动滚动。监听左右按钮的点击，执行上一张，下一张图的轮播效果。

1. 前言

早在几个月前，就想自己动手写个轮播图组件，因此也看了许多文章，断断续续过了几个月，今天终于有时间腾出手来给此插件做个总结，因此有了这篇文章。话不多说，先上 Demo, 效果如下：

2. HTML and CSS

本文不讨论html,css的实现方式，直接贴上代码


  
    
    <span class="hljs-attr">Suporka</span> <span class="hljs-string">Vue App</span>
  
  
    
      
      
        <
      
      
        
          
        
          
        
          
        
        
          
        
        
          
        
        
          
        
      
          
        
          
        
      
      
        >

</>code
/*样式代码*/
* {
  margin: 0;
  padding: 0;
}
div {
  margin: 0;
  border: 0;
  padding: 0;
}
#carousal {
  width: 557px;
  overflow: hidden;
  position: relative;
}
#wrapper {
  display: box; /* OLD - Android 4.4- */
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  left: 0;
}
.suporka-carousel__arrow {
  /* display: none; */
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  background-color: rgba(31, 45, 61, 0.5);
  color: #fff;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.suporka-carousel__arrow--right {
  right: -38px;
}
.suporka-carousel__arrow--left {
  left: -38px;
}
#carousal:hover > .suporkal-carousel__arrow {
  display: block;
}
#carousal:hover .suporka-carousel__arrow--right {
  right: 16px;
}
#carousal:hover .suporka-carousel__arrow--left {
  left: 16px;
}
#suporka-dot {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}
#suporka-dot span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  display: inline-block;
  background: #999;
}
#suporka-dot .suporka-dot--acitve {
  background: #fff;
}

3. javascript 实现轮播图功能

本插件是用 es6 写的，当然考虑兼容性，你可以选择 babel 进行编译，本文不做阐述。

1. 首先，创建一个 carousal 类

它有一些默认参数，如time（图片轮播间隔），transition (转场动画时间)，autoScroll（是否自动轮播）,showDot（是否显示底部小圆点）。然后将页面的一些元素挂载在类的属性上。

</>code
class Carousal {
    constructor(userOption) {
    this.option = {
      time: 4000,
      transition: 0.8,
      autoScroll: true,
      showDot: false
    };
    // 当前索引
    this.number = 1;
    // 定时器
    this.timer = null;
    this.interval = null;
    this.carousal = document.getElementById("carousal");
    this.wrapper = document.querySelector("#wrapper");
    this.childrenLength: document.getElementById("wrapper").children.length;
    this.init(userOption);
  }
}

2. 初始化dom

当然，默认参数是可以修改的，所以类传入了一个 userOption 对象, 在构造函数中将用户设置的参数覆盖默认参数，在this.init(userOption) 方法中执行覆盖。

轮播图轮播的原理是：在轮播图组首位添加一个末位图片的副本，同时也在轮播图末位添加一个首位图片的副本，大概就是 5 1 2 3 4 5 1 , 此时共有7张图片，当向右轮播至第七张图片‘1’ 时, 取消transition后轮播图定位至第二张图片 ‘1’, 此时再度开启transition 。同理，向左轮播至第一张图片“5”时，也会取消transition后轮播图定位至第六张图片 ‘5’, 而后再度开启 transition。

因此，我们需要手动在dom结构中插入这两个首尾图片。pushItem() 方法正是为此而生。

</>code
class Carousal {
    //...
  init(userOption) {
    // 合并用户配置
    if (Object.assign) {
      Object.assign(this.option, userOption);
    } else {
      // 不支持 Object.assign 就调用 extend 方法
      this.extend(this.option, userOption, true);
    }
    // 设置动画 transition
    this.wrapper.style.transition = `all ${this.option.transition}s`;
    this.wrapper.style["-moz-transition"] = `all ${this.option.transition}s`;
    this.wrapper.style["-webkit-transition"] = `all ${this.option.transition}s`;
    this.wrapper.style["-o-transition"] = `all ${this.option.transition}s`;
    // 首尾添加元素
    this.pushItem();
  }
  // 合并属性方法
  extend(o, n, override) {
    for (var p in n) {
      if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
        o[p] = n[p];
    }
  }
  // 初始化添加首尾子元素
  pushItem() {
    let movePx = this.carousal.offsetWidth; // 获取轮播图宽度
    let first = this.wrapper.children[0].cloneNode(true);
    let last = this.wrapper.children[this.childrenLength - 1].cloneNode(true);
    let parent = this.wrapper;
    parent.appendChild(first);
    parent.insertBefore(last, parent.children[0]);
    this.wrapper.style.left =
      this.wrapper.offsetLeft - movePx + "px";
  }
}

插入轮播图片之后，判断是否需要插入底部小圆点。requestAnimFrame()用于实现持续的动画效果。

</>code
class Carousal {
    init() {
        //...续 this.pushItem();
        if (this.option.showDot) {
            let node = document.createElement("div");
            node.setAttribute("id", "suporka-dot");
            node.innerHTML = `${"".repeat(this.childrenLength)}`;
            this.carousal.appendChild(node);
            this.dot = document.getElementById("suporka-dot");
            this.dot.firstChild.setAttribute("class", "suporka-dot--acitve");
        }
        // 判断是否开启自动轮播，如是则自动轮播
        if (this.option.autoScroll) this.requestAnimFrame(this.autoMove());
    }
    requestAnimFrame() {
        return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }
}

3. 加入事件监听

监听鼠标移入事件，当鼠标移入的时候，停止自动滚动。

监听左右按钮的点击，执行上一张，下一张图的轮播效果。

</>code
class Carousal {
    init() {
        //...续 if (this.option.autoScroll) this.requestAnimFrame(this.autoMove());
        this.addEventListener();
    }
    // 添加事件
    addEvent(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
    // 事件监听
    addEventListener() {
        if (this.option.autoScroll) {
            this.addEvent(this.carousal, "mouseover", event => {
                clearInterval(this.interval);
            });
            this.addEvent(this.carousal, "mouseout", event => {
                this.autoMove();
            });
        }
        let prev = document.getElementById("suporka-prev-btn");
        let next = document.getElementById("suporka-next-btn");
        if (prev && next) {
            this.addEvent(prev, "click", event => {
                this.prev();
            });
            this.addEvent(next, "click", event => {
                this.next();
            });
        }
    }
}

4. 自动轮播

定时动画，并且如果存在底部小圆点，修改其类名，达到与轮播图同步的效果。

</>code
// 自动轮播
class Carousal {
    // ...
    autoMove() {
        let movePx = this.carousal.offsetWidth;
        this.interval = setInterval(() => {
            this.number += 1;
            this.wrapper.style.left = 0 - movePx * this.number + "px";
            if (this.number === this.childrenLength + 1) this.startMove();
            if (this.dot)
                this.setDotClass(
                    this.dot.children,
                    this.number - 1,
                    "suporka-dot--acitve"
                );
        }, this.option.time);
    }
    // 开始移动
    startMove() {
        this.number = 1;
        this.timer = setTimeout(() => {
            this.wrapper.style.transition = `none`;
            this.wrapper.style.left = -this.carousal.offsetWidth + "px";
            setTimeout(() => {
                this.wrapper.style.transition = `all ${
                    this.option.transition
                }s`;
            }, 100);
        }, this.option.transition * 1000);
    }
    // 设置小圆点样式
    setDotClass(parent, index, cls) {
        // 没有小圆点就返回
        if (!this.dot) return false;
        for (let i = 0; i < parent.length; i++) {
            removeClass(parent[i], cls);
        }
        addClass(parent[index], cls);
    }
}
// 三个类名操作方法
function hasClass(ele, cls) {
    if (ele.className)
        return ele.className.match(new RegExp("(s|^)" + cls + "(s|$)"));
    else return false;
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        let reg = new RegExp("(s|^)" + cls + "(s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}

5. 实现上一张，下一张轮播功能

</>code
class Carousal {
    //...
    // prev上一张
    prev() {
        let movePx = this.carousal.offsetWidth;
        this.number -= 1;
        this.wrapper.style.left = 0 - movePx * this.number + "px";
        if (this.number === 0) this.goLastOne();
        if (this.dot)
            this.setDotClass(
                this.dot.children,
                this.number - 1,
                "suporka-dot--acitve"
            );
    }
    // 下一张
    next() {
        let movePx = this.carousal.offsetWidth;
        this.number += 1;
        this.wrapper.style.left = 0 - movePx * this.number + "px";
        if (this.number === this.childrenLength + 1) this.startMove();
        if (this.dot)
            this.setDotClass(
                this.dot.children,
                this.number - 1,
                "suporka-dot--acitve"
            );
    }
    // 去到最后一张
    goLastOne() {
        this.number = this.childrenLength;
        this.timer = setTimeout(() => {
            this.wrapper.style.transition = `none`;
            this.wrapper.style.left =
                -this.carousal.offsetWidth * this.childrenLength + "px";
            setTimeout(() => {
                this.wrapper.style.transition = `all ${
                    this.option.transition
                }s`;
            }, 100);
        }, this.option.transition * 1000);
    }
}

4.优化及其他

最后，代码需经过babel转译，并且以 umd 的形式支持浏览器直接引入，requirejs 及 commonjs 导入，详细做法可以参考我之前的一篇文章《ES6 手写一个“辨色”小游戏》。也可以参考我在 github 上的代码, 欢迎 fork and star .

云服务器 GPU云服务器 js轮播视频插件汽车互联网的诞生与发展一款强大的php大马轮播的html的代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100485.html

swiper的使用

摘要：是一款轮播图插件，我是用在里面，方便省事儿。官网地址地址安装安装完成之后，我没有在中注册它，而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示，所以就没必要在全局注册它，只用在页面注册使用一下就可以了。 swipe是一款轮播图插件，我是用在vue里面，方便省事儿。swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。官网地址 g...

makeFoxPlay 2019-08-22 16:24 评论0 收藏0
swiper的使用

摘要：是一款轮播图插件，我是用在里面，方便省事儿。官网地址地址安装安装完成之后，我没有在中注册它，而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示，所以就没必要在全局注册它，只用在页面注册使用一下就可以了。 swipe是一款轮播图插件，我是用在vue里面，方便省事儿。swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。官网地址 g...

MyFaith 2019-08-02 10:14 评论0 收藏0
swiper的使用

摘要：是一款轮播图插件，我是用在里面，方便省事儿。官网地址地址安装安装完成之后，我没有在中注册它，而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示，所以就没必要在全局注册它，只用在页面注册使用一下就可以了。 swipe是一款轮播图插件，我是用在vue里面，方便省事儿。swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。官网地址 g...

aaron 2019-08-29 15:04 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0