轮播图

来源：互联网发布：新淘宝联盟没有购物车编辑：程序博客网时间：2024/05/16 18:33
修改之后的轮播图。
<!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></head><body>    <style>        *{            margin:0;            padding:0;            box-sizing: border-box;        }        .cicle span{            display: inline-block;            width:10px;            height: 10px;            border-radius:50%;            background:blue;            margin-left:10px;        }        .cicle span:first-child{            margin-left:40%;            background:red;        }        #banner{            width:403px;            height:110px;            position:relative;            margin:0 auto;        }        .cicle{            width:100%;            position:absolute;            height: 10px;            bottom: 10px;        }    </style>    <div id="banner">        <img src="img/pic1.jpg" alt="" id="myImg">        <div class="cicle">            <span></span>            <span></span>            <span></span>            <span></span>        </div>          </div>    <script>        var cicle=document.getElementsByClassName('cicle')[0];        var mySpan=cicle.getElementsByTagName('span');        var num=0;        var myImg=document.getElementById('myImg');        var arr=["img/pic1.jpg","img/pic2.png","img/pic3.jpg","img/pic4.jpg"];        var timer=setInterval(function(){   //设置定时器，每隔1s改变img的src属性，顺便更改span的颜色            changeImg();            num++;            if(num>=arr.length){                num=0;            }        },1000);        // 删除空白节点        removeWhiteNode(mySpan[0].parentNode);        // span点击更改图片        for(var j=0;j<mySpan.length;j++){            mySpan[j].addEventListener("mousemove",fn1)  //事件冒泡        }        function fn1(){            for(var i=0;i<mySpan.length;i++){                if(mySpan[i]==this){                    num=i;                    changeImg();                }            }        }        function removeWhiteNode(node) {//删除空白节点            for (var i = 0; i < node.childNodes.length; i++) {                if (node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {                     node.childNodes[i].parentNode.removeChild(node.childNodes[i]);                    }                 }                return node;            }        function changeImg(){  //改变背景图片和原点颜色函数            myImg.src=arr[num];                for(var i=0;i<arr.length;i++){                     mySpan[i].style.background="blue";                }                mySpan[num].style.background="red";            }    </script></body></html>
阅读全文
0 0