轮播图的组件化

特效实现

浏览数:3,634

2017-12-20

AD:百G视频免费分享

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

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

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


    
    轮播图
    
    
    


               
    

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

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上查看,喜欢的可以顺手给个星。原型对象的基本结构如下所示:

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来区分不同轮播图中的类似元素。因为要支持轮播图宽度自适应,所以采用来百分比设置后代元素宽度。

init: function(urlArr) {                //创建dom结构
    this.wrap.style.position = "relative";
    this.wrap.style.overflow = "hidden";
    this.wrap.innerHTML = '
    '; let container = document.getElementById(this.wrapId + '_container'); let page = document.getElementById(this.wrapId + "_page"); for (let value of urlArr) { //构建圆点 container.innerHTML += '
    '; page.innerHTML += '
  • '; } 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("mouseenter", this.clearTime.bind(this));
        this.wrap.addEventListener("mouseleave", this.setTime.bind(this));
        preAngle.addEventListener("click", this.leftAngleclick.bind(this));
        nextAngle.addEventListener("click", this.rightAngleclick.bind(this));
    }
    

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

    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张以上的判断条件,有需要时可以自行添加。可以点击这里预览最终效果,如果对于这篇博客有什么建议或想法,欢迎到下方留言。

    本文作者: Kongcheng.LC
    本文链接: https://kongchenglc.github.io/blog/轮播图20170801/
    版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

    相关推荐