预览

carousel.gif

JS

/**
 * @author      jiaiyan
 * @date        2018-08-02 
 * @description 轮播
 */
; (function (global) {
    // 开启严格模式
    "use strict";
    /**
     * 初始化配置
     * @param {Object} options el: 元素id;autoTime：播放时间;animTime: 过渡时间;autoPlay: 自动播放; showNavDot: 下标圆点;dotColor: 下标颜色;dotCourseColor: 下标高亮颜色;
     */
    var carousel = function (options) {
        var that = this;
        if (!options.el && typeof options.el !== 'string') throw new Error('该插件使用至少需要传入el');
        // 元素操作
        Object.defineProperty(this, 'el', {
            set: function (el) {
                this.elInitStyle(el);
            },
            get: function () {
                return this._el;
            }
        });
        // 自动播放
        Object.defineProperty(this, "isAutoPlay", {
            set: function (bool) {
                if (bool) {
                    this.autoPlay();
                    // 鼠标移入暂停
                    this.el.onmouseover = function () {
                        clearInterval(that.autoPlayInter);
                        delete that.autoPlayInter;
                    }
                    // 鼠标移出恢复
                    this.el.onmouseout = function () {
                        that.autoPlay();
                    }
                }
            }
        });
        // 页码变化执行滚动操作
        Object.defineProperty(this, "pageNo", {
            set: function (num) {
                var totalPage = this.el.children.length - 1;
                if (isNaN(num)) {
                    num = totalPage === 0 ? 0 : 1;
                } else if (num > totalPage) {
                    num = 0;
                } else if (num < 0) {
                    num = totalPage;
                }
                if (this.showNavDot) {
                    for (var els in document.querySelectorAll("#dotOl > li")) {
                        if (document.querySelectorAll("#dotOl > li").hasOwnProperty(els)) {
                            document.querySelectorAll("#dotOl > li")[els].style.backgroundColor = that.dotColor;
                        }
                    }
                    document.querySelector('#carouselDot' + num).style.backgroundColor = that.dotCourseColor;
                };
                this._pageNo = num;
                // 滚动操作
                this.el.style.transition = "all " + this.animTime + "ms ease 0s";
                this.el.style.left = num == 0 ? "0" : "-" + num + "00%";
                // this.el.style.transform = "translate3d(" + (num == 0 ? "0" : "-" + 100 / that.el.children.length * num + "%") + ", 0px, 0px)";
            },
            get: function () {
                return this._pageNo;
            }
        });
        // 圆标
        Object.defineProperty(this, "showNavDot", {
            set: function (bool) {
                if (bool) this.setNavDot();
                this._showNavDot = bool;
            },
            get: function () {
                return this._showNavDot;
            }
        });
        // 查询元素
        this.el = document.querySelector(options.el);
        // 下标颜色
        this.dotColor = options.dotColor || "rgba(0, 0, 0, .3)";
        // 下标高亮颜色
        this.dotCourseColor = options.dotCourseColor || "rgba(0, 0, 0, 1)";
        // 播放时间 默认3000ms
        this.autoTime = options.autoTime || 3000;
        // 过渡时间 默认1000ms
        this.animTime = options.animTime || 1000;
        // 是否自动播放 默认自动播放
        this.isAutoPlay = options.autoPlay === false ? false : true;
        // 是否显示下标圆点 默认显示
        this.showNavDot = options.showNavDot === false ? false : true;
    }

    // 初始化元素样式
    carousel.prototype.elInitStyle = function (el) {
        this._el = el;
        // 设置当前样式
        el.style = "display: flex; display: -webkit-flex;width: " + el.children.length + "00%;height: inherit;overflow: hidden;position: absolute;left: 0;top: 0;";   
        // 设置父元素
        el.parentElement.style.overflow = "hidden";
        el.parentElement.style.position = "relative";
        // 设置子元素
        for (var chi in el.children) {
            if (el.children.hasOwnProperty(chi)) {
                el.children[chi].style = "width: inherit;height: inherit;display: inline-block;";
            }
        }
    }

    // 圆点下标
    carousel.prototype.setNavDot = function () {
        var that = this;
        var ol = document.createElement("ol");
        ol.id = "dotOl";
        ol.style = "position: absolute;left: 0;bottom: 30px;display: flex;display: -webkit-flex;justify-content: center; width: inherit;";
        // 下标点击事件
        ol.onclick = function (e) {
            if (e.target.id.indexOf('carouselDot') >= 0) {
                clearInterval(that.autoPlayInter);
                delete that.autoPlayInter;
                that.operation(parseInt(e.target.id.split('carouselDot')[1]) + 1);
                that.autoPlay();
            }
        }
        for (var i = 0; i <= that.el.children.length - 1; i++) {
            var li = document.createElement("li");
            li.id = "carouselDot" + i;
            li.style = "margin-right: 5px;display: inline-block;width: 10px;height: 10px;background: " + this.dotColor + ";border-radius: 10px;cursor: pointer;";
            ol.appendChild(li);
        }
        that.el.parentElement.appendChild(ol);
        // 默认第一个选中状态
        document.querySelector("#carouselDot0").style.backgroundColor = this.dotCourseColor;
    }

    // 操作
    carousel.prototype.operation = function (val) {
        switch (typeof val) {
            case "string":
                if (val == "nextPage") {
                    // 下一页
                    this.pageNo++;
                } else if (val == "previousPage") {
                    // 上一页
                    this.pageNo--;
                } else {
                    throw new Error("当前操作有误");
                }
                break;
            case "number":
                // 跳到指定页
                this.pageNo = val - 1;
                break;
            default:
                throw new Error('当前操作有误');
                break;
        }
    }

    // 自动播放
    carousel.prototype.autoPlay = function () {
        var that = this;
        that.autoPlayInter = setInterval(function () {
            that.operation("nextPage");
        }, that.autoTime)
    }

    // 暴露全局变量
    global.Carousel = carousel;

})(this);

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>carousel</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 450px;
            width: 100%;
        }

        #carousel>div:nth-child(1) {
            background-color: beige;
        }

        #carousel>div:nth-child(2) {
            background-color: #ff0000;
        }

        #carousel>div:nth-child(3) {
            background-color: #dddddd;
        }

        #carousel>div:nth-child(4) {
            background-color: #fff000;
        }
    </style>
</head>

<body>
    <section>
        <header>
            <div id="carousel">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </header>
    </section>
    <script src="./js/carousel.js"></script>
    <script>
        var carousel = new Carousel({
            el: "#carousel"
        })
    </script>
</body>

</html>