Javascript -- 运动-- 仿Flash图片显示
*效果思路：
*两边的按钮——淡入淡出
*大图下拉——层级、高度变化
*下方的li——多物体淡入淡出
*下方的Ul——位置计算
*左右按钮
*淡入淡出
*鼠标移到按钮上，按钮会消失
*层级问题--解决每当mouse移到图片的左边时，系统如何知道？ 就是在大图的Div上面再加入两个Div(markRight, markLeft)来检验mouse的位置。
*按钮和遮罩上都得加上事件 --解决每当mouse移到button的div上的问题，因为每当mouse移到button上，markRight or markLeft就是mouseout事件，则需要在button上面也加入相应的事件，以防止mouse移到button上，button没有显示出来。
*下方Li效果
*点击切换大图——选项卡 ---解决，使用一个变量now来计算当的所点中的小图，然后根据这个now来切换出大图
*Li淡入淡出——移入移出
*Ul移动——位置计算 ---这个用来移动小图，以及防止小图出界
*大图片切换
*图片层级——zIndex一直加1 --- 解决方法：就是让选中的那张图片的index为最大，以便显示出来。
*图片下拉效果(运动框架) --- 解决方法：改变image的Height,让Height慢慢增大到正常的Height.
*可以改为淡入淡出 --- 解决方法：改变image的opacity,让opacity慢慢增大到正常的100.
*加入自动播发
*和选项卡一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿FLASH的图片轮换效果 —— www.zhinengshe.com 智能社</title> <link rel="stylesheet" type="text/css" href="zns_style.css"> <script src="move.js"></script> <script> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=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'); var nowZIndex=2; var now=0;
var orientation = 1; //用来控制自动播发的方向 oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px'; //左右按钮 oBtnPrev.onmouseover=oMarkLeft.onmouseover=function () { startMove(oBtnPrev, 'opacity', 100); }; oBtnPrev.onmouseout=oMarkLeft.onmouseout=function () { startMove(oBtnPrev, 'opacity', 0); }; oBtnNext.onmouseover=oMarkRight.onmouseover=function () { startMove(oBtnNext, 'opacity', 100); }; oBtnNext.onmouseout=oMarkRight.onmouseout=function () { startMove(oBtnNext, 'opacity', 0); }; //大图切换 for(var i=0;i<aLiSmall.length;i++) { aLiSmall[i].index=i; aLiSmall[i].onclick=function () { if(this.index==now)return; now=this.index; tab(); }; aLiSmall[i].onmouseover=function () { startMove(this, 'opacity', 100); }; aLiSmall[i].onmouseout=function () { if(this.index!=now) { startMove(this, 'opacity', 60); } }; } function tab() { aLiBig[now].style.zIndex=nowZIndex++; for(var i=0;i<aLiSmall.length;i++) { startMove(aLiSmall[i], 'opacity', 60); } startMove(aLiSmall[now], 'opacity', 100); aLiBig[now].style.height=0; startMove(aLiBig[now], 'height', 320); if(now==0) { startMove(oUlSmall, 'left', 0); } else if(now==aLiSmall.length-1) { startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth); } else { startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth); } } oBtnPrev.onclick=function () { now--;
orientation = 2; if(now==-1) { now=aLiSmall.length-1; } tab(); }; oBtnNext.onclick=function () { now++;
orientation = 1; if(now==aLiSmall.length) { now=0; } tab(); }; var timer=setInterval(oBtnNext.onclick, 2000); oDiv.onmouseover=function () { clearInterval(timer); }; oDiv.onmouseout=function () {
if(orientation==1){
timer = setInterval(oBtnNext.onclick,2000);
}else{
timer = setInterval(oBtnPrev.onclick,2000);
} }; }; </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:;"></a> <a class="mark_right" href="javascript:;"></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>
*JS
function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var cur=0; if(attr=='opacity') { cur=Math.round(parseFloat(getStyle(obj, attr))*100); } else { cur=parseInt(getStyle(obj, attr)); } var speed=(iTarget-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget) { clearInterval(obj.timer); } else { if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; document.getElementById('txt1').value=obj.style.opacity; } else { obj.style[attr]=cur+speed+'px'; } } }, 30); }
*CSS
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }
.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }
.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }
.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; 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; }
浙公网安备 33010602011771号