原生javascript實現(xiàn)圖片輪播切換效果

更新時間：2022年07月13日 10:51:00 作者：#麻辣小龍蝦#

這篇文章主要為大家詳細介紹了原生javascript實現(xiàn)圖片輪播切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)圖片輪播切換效果的具體代碼，供大家參考，具體內(nèi)容如下

效果如下：

代碼部分：

<!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>
    <style>
        *{margin:0;padding:0;}
        #banner{position:relative;width:400px;height:200px;margin:50px auto;overflow: hidden;}
        #banner .box{width:400px;height:200px;overflow: hidden;}
        #banner .box li img{width:400px;height:200px;overflow: hidden;}
        #banner .box li{display:none;}
        #banner .box li.active{display:block;}
        #banner .static{position:absolute;bottom:0;height:30px;width:390px;padding-right:10px;text-align:right;}
        #banner .static span{display:inline-block;width:20px;height:20px;margin:0 2px;line-height:20px;text-align:center;background:#fff;cursor:default;}
        #banner .static span.active{background:blue;color:#fff;}
        #banner .btn{position:absolute;top:80px;height:40px;width:20px;color:#fff;line-height:40px;text-align:center;background:#000;opacity:.75;cursor:default;}
        #banner .next.btn{right:0;}
</style>
</head>
<body>
    <div id="banner">
        <div class="box">
            <ul>
                <li class="active">
                    <a href="#">
                        <img src="img/banner.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/banner01.jpg"/>
                    </a>
                </li>
                <li class="">
                    <a href="#">
                        <img src="img/banner02.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/banner03.jpg"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="static">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="prev btn"><</div>
        <div class="next btn">></div>
    </div>

    <script>
        //切換樣式
        function toggleClass(elem, classStr){
            if(elem.className){
                if(elem.className.indexOf(classStr) > -1){
                    elem.className = elem.className.replace(classStr,"");
                }else{
                    elem.className = elem.className + " " + classStr;
                }
            }else{
                elem.className = classStr;
            }
        }

        //獲取元素所在兄弟元素的索引
        function getIndex(elem){
            var index;
            var childNodes = elem.parentNode.childNodes;
            //獲取子元素的元素節(jié)點
            function childElem(){
                var result = [];
                for(var i = 0, len = childNodes.length; i < len; i++){
                    if(childNodes[i].nodeType == 1){
                        result.push(childNodes[i]);
                    }
                }
                return result;
            }
            //判斷元素與子元素是否相等
            var child = childElem(elem);
            for(var j = 0, lenj = child.length; j < len; j++){
                if(child[j] == elem){
                    index = j;
                }else{
                    console.error("沒有找到相應的子元素！");
                }
            }
            //返回索引
            return index;
        }

        //dom選擇器
        function $(selector){
            return document.querySelector(selector);
        }

        function $$(selector){
            return document.querySelectorAll(selector);
        }


        //對象參數(shù)
        var int = {
            num: null,
            speed: null,
            timerId: null
        };
        var liItem = $$("#banner .box li");
        var static = $$("#banner .static span"); 
        var btn = $$("#banner .btn");


        //初始化默認值
        var activeNum = 1;
        int.num = liItem.length;
        int.speed = 3000;

        //切換動作
        function toggleItem(num){
            toggleClass($("#banner .box li.active"), "active");
            toggleClass($("#banner .static span.active"), "active");
            //添加下一個激活選項
            toggleClass(liItem.item(num), "active");
            toggleClass(static.item(num), "active");
        }

        function autoPlay(){

            int.timerId = setInterval(function(){
                if(activeNum < int.num){
                    toggleItem(activeNum);
                    activeNum++;
                }else{
                    activeNum = 0;
                    toggleItem(activeNum);
                    activeNum++;
                }
            },int.speed);
        }

        //定時輪播
        autoPlay();

        //狀態(tài)點鼠標移入移出效果
        for(var i = 0, len = static.length; i < len; i++){

            //匿名傳參避免產(chǎn)生閉包得不到想要的效果
            (function(j){

                //鼠標移入效果
                static.item(j).onmouseenter = function(){
                    //停止動畫
                    clearInterval(int.timerId);
                    var index = getIndex(this);
                    toggleItem(index);
                }

                //鼠標移出效果
                static.item(j).onmouseleave = function(){
                    //開始動畫
                    autoPlay();
                }

            })(i);

        }

        for(var k = 0, lenk = btn.length; k < lenk; k++){
            //上下張按鈕移入移出效果
            btn.item(k).onmouseenter = function(){
                clearInterval(int.timerId);
            }

            btn.item(k).onmouseleave = function(){
                autoPlay();
            }
        }

        //單價擊上一張
        $(".prev.btn").onclick = function(){
            if(activeNum > 0){
                activeNum--;
                toggleItem(activeNum);
            }else{
                activeNum = 3;
                toggleItem(activeNum);
            }
        }

        //單擊下一張
        $(".next.btn").onclick = function(){
            if(activeNum < int.num){
                toggleItem(activeNum);
                activeNum++;
            }else{
                activeNum = 0;
                toggleItem(activeNum);
                activeNum++;
            }

        }

    </script>
</body>
</html>

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

您可能感興趣的文章: