JS圖片幻燈 焦點(diǎn)圖 te.doc

JS圖片幻燈 焦點(diǎn)圖 te 用JS圖片幻燈6焦點(diǎn)圖 body background: #0000; 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(/d/demo/flashjs/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(/d/demo/flashjs/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; display: none; cursor: pointer; .big_pic .next width: 60px; height: 60px; background: url(/d/demo/flashjs/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; display: none;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(/d/demo/flashjs/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; .small_pic img width: 120px; height: 94px; var g_aImgInfo=info: 都市魅力, href: /,info: 古香古色, href: /,info: 沉浸舞步的舞者, href: /,info: 名貴跑車, href: /,info: 聆聽天籟的精靈, href: /,info: 絢彩光芒, href: /;var oDiv=null;var oUlContent=null;var oUlBtn=null;var aLiImg=null;var aLiBtn=null;var oBtnPrev=null;var oBtnNext=null;var oTxtInfo=null;var oTxtLength=null;var oMarkPrev=null;var oMarkNext=null;var g_aTimerImg=;var g_aTimerBtn=;var g_oTimerUl=null;var g_oTimerAutoPlay=null;var g_aLiBtnAlpha=;var g_iNowImg=0;var g_iZIndexBase=2;window.onload=function ()var i=0;/獲取各類元素oDiv=document.getElementById(playimages);oUlContent=oDiv.getElementsByTagName(ul)0;oUlBtn=oDiv.getElementsByTagName(ul)1;oBtnPrev=oDiv.getElementsByTagName(div)0;oBtnNext=oDiv.getElementsByTagName(div)1;oTxtInfo=oDiv.getElementsByTagName(div)2;oTxtLength=oDiv.getElementsByTagName(div)3;oMarkPrev=oDiv.getElementsByTagName(a)0;oMarkNext=oDiv.getElementsByTagName(a)1;aLiImg=oUlContent.getElementsByTagName(li);aLiBtn=oUlBtn.getElementsByTagName(li);/為元素添加屬性oTxtInfo.innerHTML=g_aImgI;oTxtLength.innerHTML=1/+aLiImg.length;oMarkPrev.href=g_aImgInfo0.href;oMarkNext.href=g_aImgInfo0.href;oBtnPrev.miaovOpacity=0;oBtnNext.miaovOpacity=0;oBtnPrev.miaovTime=0;oBtnNext.miaovTime=0;oUlBtn.style.width=aLiBtn0.offsetWidth*aLiBtn.length+px;/為元素添加事件function showPrev()showBtn(oBtnPrev);hideBtn(oBtnNext);stopAutoPlay();function showNext()hideBtn(oBtnPrev);showBtn(oBtnNext);stopAutoPlay();function hideAll()hideBtn(oBtnPrev);hideBtn(oBtnNext);startAutoPlay();oMarkPrev.onmouseover=showPrev;oBtnPrev.onmouseover=showPrev;oMarkNext.onmouseover=showNext;oBtnNext.onmouseover=showNext;oBtnPrev.onmouseout=hideAll;oBtnNext.onmouseout=hideAll;oMarkPrev.onmouseout=hideAll;oMarkNext.onmouseout=hideAll;oBtnPrev.onmousedown=gotoPrev;oBtnNext.onmousedown=gotoNext;oUlBtn.onmouseover=stopAutoPlay;oUlBtn.onmouseout=startAutoPlay;for(i=0;iaLiBtn.length;i+)aLiBtni.miaovIndex=i;aLiBtni.onmouseover=function ()if(g_iNowImg!=this.miaovIndex)showLiBtn(this.miaovIndex);aLiBtni.onmouseout=function ()if(g_iNowImg!=this.miaovIndex)hideLiBtn(this.miaovIndex);aLiBtni.onmousedown=function ()gotoImg(this.miaovIndex);g_aTimerBtni=null;g_aLiBtnAlphai=60;g_aLiBtnAlpha0=100;startAutoPlay();function showBtn(oBtn)if(oBtn.miaovTimer)clearInterval(oBtn.miaovTimer);oBtn.miaovTimer=setInterval(function ()if(oBtn.miaovOpacity0)oBtn.miaovOpacity-=10;oBtn.style.filter=alpha(opacity:+oBtn.miaovOpacity+);oBtn.style.opacity=oBtn.miaovOpacity/100;elseoBtn.style.display=none;oBtn.style.filter=;oBtn.style.opacity=;clearInterval(oBtn.miaovTimer);oBtn.miaovTimer=0;, 30);function gotoImg(index)if(index=g_iNowImg)return;aLiImgindex.style.height=0px;aLiImgindex.style.display=block;aLiImgindex.style.zIndex=g_iZIndexBase+;if(g_aTimerImgindex)clearInterval(g_aTimerImgindex);g_aTimerImgindex=setInterval(slideDown(+index+), 30);for(i=0;i=oUlContent.offsetHeight)h=oUlContent.offsetHeight;clearInterval(g_aTimerImgindex);g_aTimerImgindex=null;aLiImgindex.style.height=h+px;function gotoNext()gotoImg(g_iNowImg+1)%aLiImg.length);function gotoPrev()gotoImg(g_iNowImg-1+aLiImg.length)%aLiImg.length);function showLiBtn(index)if(g_aTimerBtnindex)clearInterval(g_aTimerBtnindex);g_aTimerBtnindex=setInterval(showLiBtnInner(+index+), 30);function showLiBtnInner(index)var alpha=g_aLiBtnAlphaindex+10;if(alpha=100)aLiBtnindex.style.filter=;aLiBtnindex.style.opacity=1;clearInterval(g_aTimerBtnindex);g_aTimerBtnindex=null;elseaLiBtnindex.style.filter=alpha(opacity:+alpha+);aLiBtnindex.style.opacity=alpha/100;g_aLiBtnAlphai