代码地址如下：
http://www.demodashi.com/demo/11316.html

  这是一个轮播图组件，这里是代码地址，需要传入容器的id和图片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等现代浏览器。

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

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

<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>

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

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 = '<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));

}

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

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张以上的判断条件，有需要时可以自行添加。

项目文件截图：



演示效果：

使用原生js将轮播图组件化

代码地址如下：
http://www.demodashi.com/demo/11316.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权

使用原生js将轮播图组件化的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  5. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  6. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  7. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

  8. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  9. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

  1. BZOJ 2789 letters（树状数组）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2789 [题目大意] 给出两个字符串,通过A字符串相邻之间字符的交换得到B字符串, 求最 ...

  2. 【Matrix-tree定理】【并查集】【kruscal算法】bzoj1016 [JSOI2008]最小生成树计数

    题意:求一个图的最小生成树个数. 矩阵树定理:一张无向图的生成树个数 = (度数矩阵 - 邻接矩阵)的任意一个n-1主子式的值. 度数矩阵除了对角线上D[i][i]为i的度数(不计自环)外,其他位置是 ...

  3. 【分类讨论】Codeforces Round #407 (Div. 2) D. Weird journey

    考虑这个二元组中有一者是自环,则必然合法. 考虑这两条边都不是自环,如果它们不相邻,则不合法,否则合法. 坑的情况是,如果它是一张完整的图+一些离散的点,则会有解,不要因为图不连通,就误判成无解. # ...

  4. 20162312 2016-2017-2《Java程序设计》课程总结

    一.每周作业链接汇总 预备作业01 写的是有关老师和学生的关系: 预备作业02 如何做中学: 预备作业03 实验楼学习linux环境: 第一周作业 java入门,虚拟机等课前准备: 第二周作业 掌握J ...

  5. lightoj 1229 - Treblecross 博弈论

    思路:SG函数 枚举先手的每一个位置是否有必胜. 1)如果出现了XXX则必胜: 2)如果出现了XX或X.X则必败: 3)否则计算后手的sg值和. 代码如下: #include<iostream& ...

  6. 20172333 2017-2018-2 《Java程序设计》第9周学习总结

    20172333 2017-2018-2 <Java程序设计>第9周学习总结 教材学习内容 第十一章 异常与错误均是对象 异常是由代码的特定方法或者操作出错. 错误是代码运行中虚拟机出现错 ...

  7. 【OpenJudge9270】【Pku2440】【递推】DNA

    DNA [描述] A kind of virus has attacked the X planet, and many lives are infected. After weeks of stud ...

  8. Codeforces Round #114 (Div. 1) D. Wizards and Roads 笛卡尔树+树贪心+阅读题

    D. Wizards and Roads 题目连接: http://www.codeforces.com/contest/167/problem/D Description In some count ...

  9. HDU 1845 Jimmy’s Assignment（二分匹配）

    Jimmy’s Assignment Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Other ...

  10. golang slice 切片原理

    golang 中的 slice 非常强大,让数组操作非常方便高效.在开发中不定长度表示的数组全部都是 slice .但是很多同学对 slice 的模糊认识,造成认为golang中的数组是引用类型,结果 ...