纯原生javascript实现图片轮播切换效果代码。

来源：互联网发布：手机淘宝客户端在哪里编辑：程序博客网时间：2024/06/10 00:13
效果如下：
这里写图片描述
代码部分：
<!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>
阅读全文
0 0