js有层级图片切换的实现方法

最新推荐文章于 2022-01-05 05:49:41 发布

冰雪为融

最新推荐文章于 2022-01-05 05:49:41 发布

阅读量1.4k

点赞数 1

分类专栏： js学习笔记整理文章标签： js 图片切换

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79554722

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

实现原理：将要变化的数据以数组的方式存放在一个空数组中，当事件响应时，通过数组方法中的push()和shift()或者unshift()和pop()方法，先将数组中的第一个或者最后一个再次添加进数组中，然后再将第一个或最后一个删除，就这样达到图片的切换。

HTML代码：

<body>
<div>
    <span><a class="pre"><</a></span>
    <span><a class="next">></a></span>
    <ul id="ul1">
        <li>
            <a><img src="img/1.jpg" width="300px" height="200px"/></a>
        </li>
        <li>
            <a><img src="img/2.jpg" width="500px" height="160px"/></a>
        </li>
        <li>
            <a><img src="img/3.jpg" width="700px" height="120px"/></a>
        </li>
        <li>
            <a><img src="img/4.jpg" width="500px" height="80px"/></a>
        </li>
        <li>
            <a><img src="img/5.jpg" width="300px" height="40px"/></a>
        </li>

    </ul>
</div>
</body>

CSS代码：

<style>
        *{padding:0; margin:0;}
        li{list-style:none;}
        a{text-decoration:none;}
        div{width:700px; height:200px; margin:100px auto;position:relative;}
        span a{font-size:30px; line-height:60px; display:block; background:#28a5c4; color:white;opacity:1;
            position:absolute; z-index:6; top:70px;width:40px; height:60px; text-align:center;}
        span:nth-of-type(1) a{ left:120px;}
        span:nth-of-type(2) a{ left:540px;  }
        ul{width:700px; height:200px;position:absolute; left:0; top:0;}
        li{position:absolute; float:left;}
        li:nth-of-type(1) {z-index:6; left:200px;top:0px; opacity:1; filter:alpha(opacity=100);}
        li:nth-of-type(2) {z-index:4; left:100px;top:20px; height:160px; opacity:0.8; filter:alpha(opacity=80);}
        li:nth-of-type(3) {z-index:3; left:0px;top:40px; height:120px; opacity:0.6; filter:alpha(opacity=60);}
        li:nth-of-type(4) {z-index:2; left:100px;top:60px; height:80px; opacity:0.8; filter:alpha(opacity=80);}
        li:nth-of-type(5) {z-index:1; left:200px;top:80px; height:40px; opacity:0.6; filter:alpha(opacity=60);}

    </style>

JS代码

需要首先引入运动框架点击运动框架

window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            var oPre = document.getElementsByClassName('pre')[0];
            var oNext = document.getElementsByClassName('next')[0];
            var arr = [];
            for(var i=0; i<aLi.length;i++){
                var oImg = aLi[i].getElementsByTagName('img')[0];
                arr.push([oImg.width,oImg.height,css(aLi[i],'zIndex'),parseInt(css(aLi[i],'left')),parseInt(css(aLi[i],'top')),
                css(aLi[i],'opacity')*100]);//将会变化的数据存放在arr中
            }
            oPre.onclick = function(){
                arr.push(arr[0]);//将数组中的第一个小标为0的数据添加到数组的最后
                arr.shift();//删除数组中的第一个下标为0的数据
                stMove();//取出数组中的数值赋给对应的属性

            }
            oNext.onclick = function(){
                arr.unshift(arr[aLi.length-1]);//将数组中的最后一个数据添加到数组的第一位
                arr.pop();//删除数组中的最后一位
                stMove();
            }
            function stMove(){
                for(var i=0; i<aLi.length; i++){//取出数组中的数值赋给相应的属性
                    var oImg = aLi[i].getElementsByTagName('img')[0];
                    aLi[i].style.zIndex=arr[i][2];
                    startMove(aLi[i],{
                        left:arr[i][3],
                        top:arr[i][4],
                        opacity:arr[i][5],
                    })
startMove(oImg,{
                        width:arr[i][0],
                        height:arr[i][1],

                    })

                }
            }
           function css(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
           }
        }

冰雪为融

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js有层级图片切换的实现方法

实现原理：将要变化的数据以数组的方式存放在一个空数组中，当事件响应时，通过数组方法中的push()和shift()或者unshift()和pop()方法，先将数组中的第一个或者最后一个再次添加进数组中，然后再将第一个或最后一个删除，就这样达到图片的切换。HTML代码：&lt;body&gt;&lt;div&gt; &lt;span&gt;&lt;a class="pre"&gt;&lt;...
复制链接

扫一扫