原生JS实现轮播图插件

HTML部分只提供存放轮播图的容器，img标签等全部由js操作dom元素动态生成，样式部分也由js 完成

html代码部分 

 <!-- 创建存放轮播图片的容器 -->
    <div id="banner"></div>
    <!-- 引入轮播图插件 -->
    <script src="./plugin/banner.js"></script>
    <script>
        createBannerArea(document.getElementById("banner"), [{
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/1.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/2.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/3.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/4.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/5.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/6.png"
        }, {
            link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
            imgUrl: "./img/7.png"
        }])
    </script>

 其中createBannerArea（ele,options）中，ele是指获取到的轮播图片的容器（dom元素)，options是一个数组，数组的每一位为一个对象，存储点击图片时的跳转链接以及图片url地址。

js部分

function createBannerArea(areaDom, options) {
    if (!options || options.length === 0) {
        return;
    }
    //1. 定义变量
    var imgArea = document.createElement("div"); //装图片的div
    var numberArea = document.createElement("div"); //装角标的div
    var curIndex = 0; //当前显示的索引
    var autoTimer = null; //自动变化计时器
    var autoRate = 3000; //自动变化间隔
    //2. 初始化：
    //2.1 初始化areaDom
    areaDom.innerHTML = "";
    areaDom.appendChild(imgArea);
    areaDom.appendChild(numberArea);
    //2.2 初始化图片区域
    createImgArea();
    //2.3 初始化角标区域
    createNumberArea();
    //2.4 设置显示状态
    show(0);
    //3. 自动变化
    autoChange();
    areaDom.addEventListener("mouseenter", function() {
        clearInterval(autoTimer);
        autoTimer = null;
    })

    areaDom.addEventListener("mouseleave", function() {
        autoChange();
    })


    //创建图片区域
    function createImgArea() {
        imgArea.style.width = "100%";
        imgArea.style.height = "100%";
        imgArea.style.display = "flex";
        imgArea.style.overflow = "hidden";
        for (let item of options) {
            var img = document.createElement("img");
            img.src = item.imgUrl;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.display = "block";
            img.style.marginLeft = "0%";
            img.style.cursor = "pointer";
            img.addEventListener("click", function() {
                if (item.link) {
                    location.href = item.link;
                }
            })
            imgArea.appendChild(img);
        }
    }

    //创建数字区域
    function createNumberArea() {
        numberArea.style.textAlign = "center";
        numberArea.style.marginTop = "-30px";
        for (var i = 0; i < options.length; i++) {
            var span = document.createElement("span")
            span.style.display = "inline-block";
            span.style.width = "12px"
            span.style.height = "12px"
            span.style.background = "lightgray"
            span.style.cursor = "pointer";
            span.style.borderRadius = "50%";
            span.style.margin = "0 5px";
            (function(index) {
                span.addEventListener("click", function() {
                    show(index);
                })
            })(i)
            numberArea.appendChild(span);
        }
    }

    //根据指定的索引，设置显示状态
    function show(newIndex) {
        curIndex = newIndex;
        for (var i = 0; i < numberArea.children.length; i++) {
            var num = numberArea.children[i];
            var imgEle = imgArea.children[i];
            if (i == curIndex) {
                num.style.background = "#be926f";
                imgEle.style.display = "block";
            } else {
                num.style.background = "lightgrey";
                imgEle.style.display = "none";
            }
        }

    }
    //自动播放函数
    function autoChange() {
        if (autoTimer) {
            return;
        }
        autoTimer = setInterval(function() {
            if (curIndex === options.length - 1) {
                show(0);
            } else {
                show(curIndex + 1);
            }
        }, autoRate)
    }
}