轮播图

最新推荐文章于 2024-09-24 11:55:49 发布

Elazy

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量217

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/w58347000/article/details/78421692

版权

js 专栏收录该内容

1 篇文章 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>
</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>