效果思路
两边的按钮——淡入淡出
大图下拉——层级、高度变化
下方的li——多物体淡入淡出
下方的Ul——位置计算
左右按钮
淡入淡出
鼠标移到按钮上，按钮会消失
层级问题
按钮和遮罩上都得加上事件
下方Li效果
点击切换大图——选项卡
Li淡入淡出——移入移出
Ul移动——位置计算
大图片切换
图片层级——zIndex一直加1
图片下拉效果(运动框架)
可以改为淡入淡出
加入自动播放
和选项卡一样
缩略图滚动计算说明
第0张 offsetLeft
0 0
1 0
2 -w
3 2*w
n (n-1)*w
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<style>
body{
background:#666;
}
ul{margin:0px;padding:0px;}
li{
list-style-type:none;
}
.play{width:400px;height:430px;background:#ccc;margin:50px auto;font: 12px Arial;}
.big_pic{width:400px;height:320px;overflow:hidden;position:relative;}
.big_pic li{width:400px;height:320px;overflow:hidden;position:absolute;top:0px;left:0px; z-index:0;background: url(images/loading.gif) no-repeat center center;}
.mark_left{width:200px;height:320px;position:absolute;top:0px; left:0px; filter: alpha(opacity:0); opacity: 0;z-index: 3000;}
.mark_right{width:200px;height:320px;position:absolute;top:0px; right:0px; filter: alpha(opacity:0); opacity: 0;z-index: 3000;}
.big_pic .prev{width:60px;height:60px;background:url(images/btn.gif);position:absolute;top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer;}
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }
.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow:hidden;}
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6;}
.small_pic img { width: 120px; height: 94px; }
</style>
<script src="move1.js"></script>
<script>
function getByClass(oParent,oElement)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==oElement)
{
aResult.push(aEle[i]);
}
}
return aResult;
};
window.οnlοad=function(){
var oDiv=document.getElementById('playimages');
var oBtnPrev=getByClass(oDiv, 'prev')[0];
var oBtnNext=getByClass(oDiv, 'next')[0];
var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
var oMarkRight=getByClass(oDiv, 'mark_right')[0];
var oDivSmall=getByClass(oDiv, 'small_pic')[0];
var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall=oDivSmall.getElementsByTagName('li');
var oUlBig=getByClass(oDiv, 'big_pic')[0];
var aLiBig=oUlBig.getElementsByTagName('li');
//左右按钮
oBtnPrev.οnmοuseοver= oMarkLeft.οnmοuseοver=function(){
startMove(oBtnPrev,'opacity',100);
}
oBtnPrev.οnmοuseοut= oMarkLeft.οnmοuseοut=function(){
startMove(oBtnPrev,'opacity',0);
}
oBtnNext.οnmοuseοver= oMarkRight.οnmοuseοver=function(){
startMove(oBtnNext,'opacity',100);
}
oBtnNext.οnmοuseοut= oMarkRight.οnmοuseοut=function(){
startMove(oBtnNext,'opacity',0);
}
var nowIndex=2;//为了确定z-index的值，越大就显示在前面
<span style="color:#ff0000;"> var now=0;//记录当前为第几张图片，重复点击，zIndex不变</span>
for(var i=0;i<aLiSmall.length;i++)
{
aLiSmall[i].index=i;//知道点的是第几张图
aLiSmall[i].οnclick=function(){
<span style="color:#ff0000;"> if(this.index==now)//判断当前张是否重复点击，是则什么也不执行//说明反复点的是同一张图
return;
now=this.index;//讲当前张赋值给now</span>
tab();
};
//小图移入改变透明度
aLiSmall[i].οnmοuseοver=function(){
startMove(this,'opacity',100);
}
aLiSmall[i].οnmοuseοut=function(){
<span style="color:#33ff33;"> if(this.index==now)//如果点击的是当前的图片，就不返回透明
return;</span>
else
{
startMove(this,'opacity',60);
}
};
};
function tab(){//执行大图播放
aLiBig[now].style.zIndex=nowIndex;//让zindex值变大
nowIndex++;
for(var i=0;i<aLiSmall.length;i++)//先让所有的透明度变成60
{
startMove(aLiSmall[i],'opacity',60);
}
startMove(aLiSmall[now],'opacity',100);//让当前点击的图片透明度变深
//要让点击的图片透明度不变，在鼠标移出时判断
aLiBig[now].style.height=0;//让图片从上往下运动
startMove( aLiBig[now],'height',320);
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+"px";//设置缩略图总宽度
//小图的滚动
if(now==0)
{
startMove(oUlSmall,'left',0);
}
else if(now== aLiSmall.length-1)
{
startMove(aLiSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);//设置倒数第二张位置，显得不动
}
else
{
startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);//向左运动
}
}
//鼠标点击左右按钮件切换图片
oBtnPrev.οnclick=function()
{
now--;
if(now==-1)
{
now=aLiSmall.length-1;
}
tab();
}
oBtnNext.οnclick=function()
{
now++;
if(now==aLiSmall.length)
{
now=0;
}
tab();
}
//定时器自动播放 //自动播放就是替你执行点击事件
var timer=setInterval(oBtnNext.onclick,1500);
//鼠标移入移出控制播放
oDiv.οnmοuseοver=function(){
clearInterval(timer);
}
oDiv.οnmοuseοut=function(){
timer=setInterval(oBtnNext.onclick,1500);
}
}
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div>
<a class="mark_left" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a>
<a class="mark_right" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a>
<div class="bg"></div>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)