您的位置：首页 > Web前端 > JavaScript

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

2018-03-14 15:15 483 查看

实现原理：将要变化的数据以数组的方式存放在一个空数组中，当事件响应时，通过数组方法中的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];
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 图片切换

相关文章推荐

新的分享

章节导航