当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用javaScript来实现一个简单的广告推送

使用javaScript来实现一个简单的广告推送

2020年07月22日  | 移动技术网IT编程  | 我要评论 
<script>
        //当页面加载完成之后执行
        window.onload = into;
        //定义一个全局变量
        var int;
        //定义一个全局时间变量
        var time;
        //获取id
        function into() {
            int = document.getElementById("nav");
            //调用stop()
            stop();
            // console.log(int);
        }

        function stop() {
            //调用switc并使它每秒循环
            time = setInterval("switc()", 1000);
            // console.log(time);
        }
        //定义一个图片循环数
        var i = 1;

        function switc() {
            //有6张图片就循环6次
            if (i >= 6) {
                i = 0;
            }
            i++;
            // console.log(i);
            //重新赋值
            int.src = "images/dd_scroll_" + i + ".jpg"
            back();
        }

        function begin() {
            clearInterval(time);

        }
        //切换背景颜色
        function back() {
            //获取所有li
            var ul_li = document.getElementById("ul_id");
            var lis = ul_li.getElementsByTagName("li");
            // console.log(lis);
            //将所有li的背景色变为空
            for (var k = 0; k < lis.length; k++) {
                lis[k].style.background = "";
            }
            var and = document.getElementById("ul_li_" + i);
            and.style.background = "orange";
        }
    </script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .one {
            display: flex;
        }
        
        #nav {
            margin-right: 20px;
        }
        
        li {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="one">
        <img src="images/dd_scroll_1.jpg" alt="图片" id="nav" onmouseover="begin()" onmouseout="stop()">
        <ul id="ul_id">
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;background: orange;" id="ul_li_1">1</li>
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;" id="ul_li_2">2</li>
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;" id="ul_li_3">3</li>
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;" id="ul_li_4">4</li>
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;" id="ul_li_5">5</li>
            <li style="width: 20px; height: 20px;text-align: center; font-size: 16px; border: 1px solid;" id="ul_li_6">6</li>
        </ul>
    </div>
</body>
``

本文地址：https://blog.csdn.net/qq_47811858/article/details/107488862

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网