Js利用DOM操作修改div的层级达到超低配版轮播图效果

最新推荐文章于 2022-08-03 16:33:56 发布

Zzs_Scofield

最新推荐文章于 2022-08-03 16:33:56 发布

阅读量1.1k

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/zhazhashuai1999/article/details/107307365

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

突然想到一个简版轮播图方法
以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style>
        
        .box{
            /* 必须使用绝对定位 */
            position: absolute;
            /* 以下四个值无关紧要 */
            top:50%;
            left: 50%;
            right: 0;
            bottom: 0;
    
        }
    </style>
    <script>
        window.onload = function(){
            // 从第二张开始
        var i = 2;
        var x = 1;
        function change(){
            //获取盒子的dom元素引用
            var amend = document.getElementById(i++) ;
            //修改盒子的层级，注意：在style里面写层级是用z-index,但这里修改层级要用.zIndex;
            amend.style.zIndex = x++;
            //当修改完最后一张轮播图时重新切换到第一张
           if(i == 5)i = 1;
        
          
        }
            //设置定时器，三秒后执行change函数
        setInterval(change,3000);
        }
    </script>
</head>
<body>
    <!-- 第一个图片要将层级设为1，不然初始时会被后面的图片盖住，当然，也可以把第一张图片放到最后 -->
    <div class="box" id="1" style="z-index: 1;"><img src="./img/1.png" width=118px></div>
    <div class="box" id="2"><img src="./img/2.png" width=118px></div>
    <div class="box" id="3"><img src="./img/3.png" width=118px></div>
    <div class="box" id="4"><img src="./img/4.png" width=118px></div>
   
</body>
</html>

有好的建议可以评论提出，共勉。