将轮播图组件化

时间 2019-11-06

标签组件繁體版

原文原文链接

这是一个轮播图组件，你能够直接下载使用，这里是代码地址，须要传入容器的id和图片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等现代浏览器。这里是原文地址。javascript

以前写一些功能或是特效都是写在一个个函数里，可能由于我是由c语言入门编程，因此更倾向于面向过程的编程方式，没有想过将一个模块抽象成为对象，作成组件。可是因为尝到了重复造轮子之苦。我决定将不可复用的代码作成组件，提升编程效率。如下就是我作轮播图组件的所有过程，因为是第一次写组件，若是有哪里思惟不对，或写的方式有问题，还但愿不吝赐教，共同窗习。css

首先看一下如何使用这个组件，用到了font-awesome图标库，而后调用轮播图的css，最后是用户本身的css，用户必须设置容器id以及容器宽高，不然没法正常显示。生成轮播图时给构造函数传入容器元素，以及图片地址：html

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/user-index.css">
</head>

<body>
    <div id="carousel"></div>           
    <div id="other"></div>
    <script src="js/carousel.js"></script>
    <script>
        var carousel = new Carousel({
            wrap: document.getElementById("carousel"),
            urlArr: ["img/1.jpg", "img/2.jpg", "img/3.jpg"]
        });
        var other = new Carousel({
            wrap: document.getElementById("other"),
            urlArr: ["img/4.jpg", "img/5.jpg", "img/6.jpg"]
        });
    </script>
</body>

下边咱们看下具体实现。首先是轮播图的构造函数：java

function Carousel(obj) {
    this.wrap = obj.wrap;
    this.wrapId = obj.wrap.id;              //容器的id
    this.wrapWidth = this.wrap.offsetWidth; //容器宽
    this.imgNumber = obj.urlArr.length;     //图片数
    this.activePage = 0;                    //轮播图当前页
    this.settimeID;                         //定时器id
    this.init(obj.urlArr);
}

基本思路就是在构造函数里写入轮播图的实例属性，不一样的轮播图具备不一样的实例属性，将其共同拥有的方法写成原型属性，完整代码请到github上查看，喜欢的能够顺手给个星。原型对象的基本结构以下所示：git

Carousel.prototype = {
    constructor: Carousel,                  //构造函数指向原函数
    init: function(urlArr){},               //构建DOM结构
    bindEvent: function(){},                //绑定事件
    pageActiveColor: function(){},          //绘制圆点
    leftAngleclick: function(){},           //点击左箭头
    rightAngleclick: function(){}, 
    selectPage: function(selectNum){},      //点击圆点定位到指定图片
    setTime: function(){},                  //自动播放
    clearTime: function(){}                 //鼠标悬浮取消自动播放
}

创建dom结构的代码以下，根据容器的id生成后代dom节点的id以及class，而后在css中使用[attribute$=value]选择器对不一样轮播图使用一样的样式。而在代码中也能够根据其容器id来区分不一样轮播图中的相似元素。由于要支持轮播图宽度自适应，因此采用来百分比设置后代元素宽度。github

init: function(urlArr) {                //建立dom结构
    this.wrap.style.position = "relative";
    this.wrap.style.overflow = "hidden";
    this.wrap.innerHTML = '<span id="' + this.wrapId + '_pre" class="fa fa-angle-left fa-3x"></span><span id="' + this.wrapId + '_next" class="fa fa-angle-right fa-3x"></span><ul id="' + this.wrapId + '_page"></ul><div id="' + this.wrapId + '_container"></div>';
    let container = document.getElementById(this.wrapId + '_container');
    let page = document.getElementById(this.wrapId + "_page");
    for (let value of urlArr) {         //构建圆点
        container.innerHTML += '<div class="' + this.wrapId + '_img-item"><img src="' + value + '"></div>';
        page.innerHTML += '<li class="' + this.wrapId + '_pagination"></li>';
    }
    container.style.width = this.imgNumber + "00%";
    container.style.left = 0;
    for (let value of document.getElementsByClassName(this.wrapId + "_img-item")) {
        value.style.width = 100 / this.imgNumber + "%";
    }
    document.getElementsByClassName(this.wrapId + "_pagination")[this.activePage].id = this.wrapId + "_active";        
    this.pageActiveColor();
    this.setTime();
    this.bindEvent();
}

建立的结构大致上如图下所示：#id表明用户定义的容器，生成一个#(id)_container的包裹元素，宽度是容器宽度的图片张数倍，.(id)_img-item[n]的宽度和高度都等同于容器，图片在各自的.(id)_img-item[n]里铺满。给容器定义属性position: relative，经过设置了绝对定位的#(id)_container的left值来实现轮播。编程

为左右箭头以及下边的小圆点添加事件，在鼠标移入轮播图时中止自动播放，移出时设置自动播放。须要注意的是addEventListener的第二个参数必须是bind了this后的函数。由于调用环境自带的函数会使this的绑定丢失，若是不清楚this的指向的话能够看这篇文章。浏览器

bindEvent: function() {                 //绑定事件
    let preAngle = document.getElementById(this.wrapId + "_pre");
    let nextAngle = document.getElementById(this.wrapId + "_next");
    let pageUl = document.getElementById(this.wrapId + "_page");
    let pages = pageUl.getElementsByClassName(this.wrapId + "_pagination");
    for (let key = 0; key < pages.length; key++) {
        pages[key].addEventListener("click", this.selectPage.bind(this, key));
        console.log(key);
    }
    this.wrap.addEventListener("mouseover", this.clearTime.bind(this));
    this.wrap.addEventListener("mouseout", this.setTime.bind(this));
    preAngle.addEventListener("click", this.leftAngleclick.bind(this));
    nextAngle.addEventListener("click", this.rightAngleclick.bind(this));
}

切换图片的基本思路就是改变实例属性中的当前页这个变量，而后根据这个变量的值对包裹元素进行定位，再使对应的小圆点变色。下边是点击左箭头触发的函数，判断若是处于边缘就跳到最后。点击右箭头和下边圆点的事件与之相似。dom

leftAngleclick: function() {            //点击左箭头
        let container = document.getElementById(this.wrapId + "_container");
        if(this.activePage == 0) {      //判断是否到边缘
            this.activePage = this.imgNumber - 1;
        } else {
            this.activePage--;
        }
        container.style.left = "-" + this.activePage + "00%";
        this.pageActiveColor();
    }

最后给轮播图添加自动播放功能，即利用定时器每3秒触发一次右箭头的点击事件。将返回的定时器保存到实例属性中，以便在鼠标悬停的时候中止自动轮播。函数

setTime: function() {                           //自动播放
        let wrapId = this.wrapId;               //解决this绑定丢失
        this.settimeID = setInterval(function() {
            document.getElementById(wrapId + "_next").click();
        } , 3000);
        console.log("set");
    },
clearTime: function() {                         //鼠标悬浮取消自动播放
        let theId = this.settimeID;             //解决this绑定丢失
        console.log("clear");
        clearInterval(theId);        
    }

到这轮播图组件就算写好了，这可让咱们少写不少代码，并且能够在一个页面中屡次使用，不会污染到全局变量。缺陷在于这时的轮播图还不能支持10张以上的图片，由于考虑到这种需求并非不少，就没有写10张以上的判断条件，有须要时能够自行添加。有什么意见或建议欢迎留言。