一个小例子，小图切换大图

最新推荐文章于 2020-04-15 15:07:25 发布

weixin_30553777

最新推荐文章于 2020-04-15 15:07:25 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/slientLove/p/5891405.html

版权

小图切换大图是很常见的一个网页效果，这里我用前面的运动框架自己写了个小例子，提供一些思路：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0;padding: 0; }
#ul1{ width: 400px;height: 300px;list-style-type: none;margin: 0 auto;background: green; overflow: hidden;position: relative;}
#ul1 li{ width: 400px;height: 300px;position: absolute;}
#div1{ width: 400px;height: 120px;margin:0px 482px;overflow: hidden;position: relative;}
#ul2{ width:400px;height: 120px;list-style-type: none;position:absolute;top:0px;left:0px;background: #ccc; overflow: hidden;}
#ul2 li{ width: 100px;height: 100px;float: left;padding: 12px 17px;filter: alpha(opacity:60);opacity:0.6;}
</style>
<script src="move.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oUl1 = document.getElementById("ul1");　　　　　　　　　　//选出大图的ul
var oLi1 = oUl1.getElementsByTagName('li');
var oUl2 = document.getElementById("ul2");
var oLi2 = oUl2.getElementsByTagName('li');
var iNow = 0;
var Minindex = 2; 　　　　　　　　　　　　　　　　　　　　　　//设置图片显示的优先级 ,开始时将层级设置为2
oUl2.style.width = oLi2.length*oLi2[0].offsetWidth+'px'; 　　//这里动态的添加小 ul 的宽度，等于每个li 的宽度乘以li的数量
for(var i=0;i<oLi2.length;i++){
oLi2[i].index=i;　　　　　　　　　　　　　　　　　　　　　　 //为每个li 加上索引值
oLi2[i].οnclick=oLi2[i].onmouseover = function(){
　　for(var i=0;i<oLi2.length;i++){
　　setMove(oLi2[i],'opacity',60);　　　　　　　　　　　　　　//刚开始将每个小图片的透明度都设为 60%　　　　　　
　　}

setMove(this,'opacity',100);
if(this.index!=iNow){　　　　　　　　　　　　　　　　　　　　//判断鼠标是不是从当前图片移动移出，如果是就不用改变当前图片的透明度
oLi1[this.index].style.zIndex = Minindex++; 　　　　　　　　//在鼠标移入一张小图时，对应的大图的层级就自动增加一个单位
iNow = this.index;
oLi1[iNow].style.top=-200+'px'; 　　　　　　　　　　　　　　 //这里一定要加上单位，实现图片从上往下显示出来
setMove(oLi1[this.index],'top',0);
}

if(iNow==0||iNow==1){　　　　　　　　　　　　　　　　　　//首两张图片的运动状况需要特殊考虑
setMove(oUl2,'left',0);
}else{
if(iNow==oLi2.length||iNow==(oLi2.length-1)){　　　　　　//最后两张图片也需要特殊考虑
setMove(oUl2,'left',-(iNow-2)*oLi2[0].offsetWidth);
}else{
setMove(oUl2,'left',-(iNow-1)*oLi2[0].offsetWidth);　　　　//当鼠标移动到第三张或者后面时，小图会按顺序滚动，首两张和最后两张不会运动，需要考虑
}
}
}
oLi2[i].onmouseout = function(){
if(this.index!=iNow){
setMove(this,'opacity',60);
}
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li style="z-index:1;"><img src="img/sea.jpg"></li>
<li><img src="img/宁静的海.jpg"></li>
<li><img src="img/dusk.jpg"></li>
<li><img src="img/cry.jpg"></li>
<li><img src="img/宁静.jpg"></li>
<li><img src="img/就这样.jpg"></li>
<li><img src="img/beautiful.jpg"></li>
<li><img src="img/bus.jpg"></li>
</ul>
<div id="div1">
<ul id="ul2">
<li><img src="img/sea1.jpg"></li>
<li><img src="img/宁静的海1.jpg"></li>
<li><img src="img/dusk1.jpg"></li>
<li><img src="img/cry1.jpg"></li>
<li><img src="img/宁静1.jpg"></li>
<li><img src="img/就这样1.jpg"></li>
<li><img src="img/beautiful1.jpg"></li>
<li><img src="img/bus1.jpg"></li>
</ul>
</div>
</body>
</html>