js原生輪播圖插件制作

更新時間：2021年10月04日 09:16:33 作者：墨者羽晨

這篇文章主要為大家詳細介紹了js原生輪播圖插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js原生輪播圖插件制作的具體代碼，供大家參考，具體內(nèi)容如下

調(diào)用時也只需要寫一個DIV即可

調(diào)用的js部分配置內(nèi)容：

傳入輪播圖需顯示的位置（div）

傳入圖片和點擊跳轉(zhuǎn)的鏈接

話不多說，上代碼

HTML

<div id="banner"></div>

HTML文檔內(nèi)的<script>,這里是輪播圖的配置內(nèi)容，一共兩個參數(shù)，第一個是需要傳入的DIV（輪播圖所顯示的區(qū)域），第二個參數(shù)是一個數(shù)組，數(shù)組里的元素是一個個對象，對象里第一個屬性imgUrl表示圖片，第二個屬性link表示跳轉(zhuǎn)鏈接

一個數(shù)組元素就是一張圖片，不限數(shù)量，可自適應(yīng)

<script>
        bannerArea(document.getElementById("banner"),[
            {imgUrl:"圖片",
            link:"跳轉(zhuǎn)鏈接"
        },
            {imgUrl:"圖片",
            link:"跳轉(zhuǎn)鏈接"
        },
            {imgUrl:"圖片",
            link:"跳轉(zhuǎn)鏈接"
        }
        ])
</script>

JS插件內(nèi)容

// 兩個參數(shù)，第一個輪播圖區(qū)域，第二個是配置
function bannerArea(areaDom, options) {
    var imgArea = document.createElement("div");
    var numberArea = document.createElement("div");
    var curIndex = 0;//第幾張輪播圖
    var changeTimer = null;
    var changeDuration = 1000;//間隔
    var timer = null;
    
    initImg();//創(chuàng)建一個區(qū)域來顯示圖片
    
    initNumber();//創(chuàng)建區(qū)域顯示角標
    
    setStatus();//設(shè)置狀態(tài)
    
    autoChange();//自動切換
 
    //下面是局部函數(shù)
 
    //創(chuàng)建圖片，并且設(shè)置樣式
    function initImg() {
        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.margin = "0";
            img.addEventListener("click", function () {
                location.href = options[i].link;
            })
            imgArea.appendChild(img);
        }
        imgArea.addEventListener("mouseenter", function () {
            clearInterval(changeTimer);
            changeTimer = null;
        })
        imgArea.addEventListener("mouseleave", function () {
            autoChange();
        })
        areaDom.appendChild(imgArea);
    }
    //創(chuàng)建角標元素和設(shè)置樣式
    function initNumber() {
        numberArea.style.textAlign = "center";
        numberArea.style.marginTop = "-25px";
        for (let 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";
            sp.addEventListener("click", function () {
                curIndex = i;
                setStatus();
            })
            numberArea.appendChild(sp);
        }
        areaDom.appendChild(numberArea);
    }
 
    //設(shè)置角標區(qū)域狀態(tài)
    function setStatus() {
        //設(shè)置圓圈的背景顏色
        for (var i = 0; i < options.length; i++) {
            if (i === curIndex) {
                //設(shè)置背景顏色為選擇
                numberArea.children[i].style.background = "rgb(222 57 57)";
            } else {
                //非選擇
                numberArea.children[i].style.background = "lightgray";;
            }
 
        }
        //顯示圖片
        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)
    }
 
}

輪播圖速度（切換時間）可在插件代碼中 var changeDuration = 1000;//間隔一句里調(diào)整

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: