js图片轮播切换效果

时间:2022-09-28 #麻辣小龙虾# 人气:0
效果如下：
代码部分：
<!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;
            //获取子元素的元素节点
            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);
        }


        //对象参数
        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();

        //状态点鼠标移入移出效果
        for(var i = 0, len = static.length; i < len; i++){

            //匿名传参避免产生闭包得不到想要的效果
            (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>
加载全部内容