原生JS实现通用轮播图插件

最新推荐文章于 2024-05-01 22:25:44 发布

长门&有希

最新推荐文章于 2024-05-01 22:25:44 发布

阅读量279

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/weixin_41847321/article/details/90411258

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原本是看网课写出来的，有一点问题，后来发现与网上的一篇博客代码很相似，参考了一部分改正了。
参考博客地址：https://blog.csdn.net/weixin_41847321/article/details/90411258?tdsourcetag=s_pctim_aiomsg

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>Document</title>
    <!-- border 会占据空间 outline 下面的不会占据空间  -->
    <style>
        #banner {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div  id="banner">

    </div>

    <script src="./plugin/banner.js"></script>
    <script>
        var bannerDiv = document.getElementById("banner");
        createBannerArea(bannerDiv, [{
                imgUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=15576430,1042561804&fm=27&gp=0.jpg",
                link: "http://www.baidu.com"
            },
            {
                imgUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1718395925,3485808025&fm=27&gp=0.jpg",
                link: "http://www.baidu.com"
            },
            {
                imgUrl: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893146502,314297687&fm=27&gp=0.jpg",
                link: "http://www.baidu.com"
            }
        ])
    </script>
</body>

</html>

JS代码

/**
 * 全局函数，附着在window对象中
 * @param {*} areaDom 轮播图区域，是一个dom元素
 * @param {*} options 轮播图配置
 */
function createBannerArea(areaDom, options) {
    if (!options || options.length === 0) {
        return;
    }



    var imgArea = document.createElement("div"); //图片区域的div
    var numberArea = document.createElement("div"); //角标区域的div
    var curIndex = 0; //当前显示的是第几张轮播图
    var changeTimer = null; //自动切换的计时器
    var changeDuration = 2000; //1秒钟切换间隔
    var timer = null; //动画计时器

    // 1.创建一个区域，用于显示图片
    initImgs();

    //2.创建一个区域，用于显示角标
    initNumbers();

    //3.设置状态
    setStatus();

    //4.自动切换
    autoChange();


    //下面是局部函数
    /**
     * 全局函数
     * 初始化图片区域
     */
    function initImgs() {
        imgArea.style.width = "100%";
        imgArea.style.height = "100%";

        imgArea.style.display = "flex";

        imgArea.style.overflow = "hidden";
        for (let i = 0; i < options.length; i++) {
            var obj = options[i];
            var img = document.createElement("img");
            img.src = obj.imgUrl;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.marginLeft = "0";
            img.style.cursor = "pointer";
            img.addEventListener("click", function () {
                location.href = options[i].link;
            })
            imgArea.appendChild(img);
        }
        areaDom.addEventListener("mouseenter", function () {
            clearInterval(changeTimer);
            changeTimer = null;
        })
        areaDom.addEventListener("mouseleave", function () {
            autoChange();
        })
        areaDom.appendChild(imgArea);
    }

    /**
     * 初始化角标区域
     */
    function initNumbers() {
        numberArea.style.textAlign = "center";
        numberArea.style.marginTop = "-25px";


        for (var i = 0; i < options.length; i++) {
            var sp = document.createElement("span");
            sp.style.width = "12px";
            sp.style.height = "12px";
            sp.style.background = "lightgray";
            sp.style.display = "inline-block";
            sp.style.margin = "0 7px";
            sp.style.borderRadius = "50%";
            sp.style.cursor = "pointer";
            (function (index) {
                sp.addEventListener("click", function () {
                    curIndex = index;
                    setStatus();
                })
            })(i)

            numberArea.appendChild(sp);
        }
        areaDom.appendChild(numberArea);
    }
    /**
     * 设置整个区域的状态
     */
    function setStatus() {
        //1.设置圆圈的背景颜色
        for (var i = 0; i < numberArea.children.length; i++) {
            if (i === curIndex) {
                //设置背景颜色为选中状态
                numberArea.children[i].style.background = "#be926f";
                imgArea.children[i].style.display = "block";
            } else {
                //设置背景颜色为普通状态
                numberArea.children[i].style.background = "lightgray";
                imgArea.children[i].style.display = "none";
            }
        }

        //2.显示图片
        var start = parseInt(imgArea.children[0].style.marginLeft);
        var end = curIndex * -100;
        var dis = end - start;
        var duration = 500;
        var speed = dis / duration;

        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            start += speed * 20;
            imgArea.children[0].style.marginLeft = start + "%";
            if (Math.abs(end - start) < 1) {
                imgArea.children[0].style.marginLeft = end + "%";
                clearInterval(timer);
            }
        }, 20);



    }

    /**
     * 自动切换轮播图
     */
    function autoChange() {
        if (changeTimer) {
            return;
        }
        changeTimer = setInterval(function () {
            if (curIndex === options.length - 1) {
                curIndex = 0;
            } else {
                curIndex++;
            }
            setStatus();
        }, changeDuration)
    }
}

长门&有希

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现通用轮播图插件

原本是看网课写出来的，有一点问题，后来发现与网上的一篇博客代码很相似，参考了一部分改正了。参考博客地址：https://blog.csdn.net/weixin_41847321/article/details/90411258?tdsourcetag=s_pctim_aiomsghtml部分<!DOCTYPE html><html lang="en"><...
复制链接

扫一扫