类似flash幻灯片效果

来源：互联网发布：淘宝永久封店怎么解封编辑：程序博客网时间：2024/05/29 17:09

html css布局：

html:

<!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" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link rel="stylesheet" href="css/style.css"/><title>flash效果幻灯片</title><script type="text/javascript" language="javascript" src="javascript/move.js"></script><script type="text/javascript" language="javascript" src="javascript/flashmove.js"></script></head><body>  <div  id="play" class="play">       <div class="big_pic" id="big">       <div class="make_prevouse" id="make_prevouse"></div>       <div class="make_next" id="make_next"></div>       <ul>       <li style="z-index:1;"><img src="image/1.jpg" /></li>       <li><img src="image/2.jpg" /></li>       <li><img src="image/3.jpg" /></li>       <li><img src="image/4.jpg" /></li>       <li><img src="image/5.jpg" /></li>       <li><img src="image/6.jpg" /></li>       </ul>       <a class="prevouse" href="javascript:void(0);"></a>       <a class="next" href="javascript:void(0);"></a>       </div>       <div class="small_pic" id="small">       <ul>           <li style="filter:alpha(opacity:100);opacity:1;"><img src="image/1.jpg" /></li>           <li><img src="image/2.jpg" /></li>           <li><img src="image/3.jpg" /></li>           <li><img src="image/4.jpg" /></li>           <li><img src="image/5.jpg"  /></li>         <li><img src="image/6.jpg" /></li>        </ul>       </div>  </div></body></html>

css:

body{background:#CCC;width:100%;}.play{width:500px;height:500px;border:2px solid #9F3; margin:50px auto;font: 12px Arial;}.big_pic{position:relative;width:490px;height:390px;border:1px solid #000;margin:5px auto 5px auto;overflow:hidden;}.small_pic{position:relative;width:490px;height: 95px;border:1px solid #000;margin:0px auto 5px auto;overflow:hidden;}ul{margin:0px;padding:0px;}li{list-style:none;}.big_pic li{width:490px;height:390px;position:absolute;top:0;left:o;overflow:hidden;}img { border: 0; }.prevouse{width:245px;height:390px;position:absolute;background-color:#C33;//不能删除掉，否则ie下不能兼容top:0;left:0;z-index:100;filter:alpha(opacity:0);opacity:0;}.next{width:244px;height:390px;position:absolute;top:0;right:0;z-index:100;background-color:#0F0;filter:alpha(opacity:0);opacity:0;}.small_pic li{background-color:#999;float:left;width:150px;height: 85px;margin:5px auto 5px 10px;filter:alpha(opacity:60);opacity:0.6;}.small_pic img { width: 150px;    height: 85px;}.make_prevouse{ width: 60px;  height: 60px;  background:url(../image/btn.gif) no-repeat; position: absolute;  top: 140px; left: 10px;  cursor: pointer;  z-index:101; filter:alpha(opacity:0); opacity:0;}.make_next{ width: 60px;  height: 60px;  background:url(../image/btn.gif) no-repeat 0 -60px; position: absolute;  top: 140px; right: 10px;  cursor: pointer;  z-index:101; filter:alpha(opacity:0); opacity:0;}.small_pic ul{  height: 95px;  position: absolute;   top: 0;   left: 0; }

js文件：

flashmove.js

window.onload=function(){var bDiv=document.getElementById("big");var sDiv=document.getElementById("small");var sUl=sDiv.getElementsByTagName("ul")[0];var sLi=sUl.getElementsByTagName("li");var bUl=bDiv.getElementsByTagName("ul")[0];var bLi=bUl.getElementsByTagName("li");var oA=bDiv.getElementsByTagName('a');var gonext=bDiv.getElementsByTagName('div');    //获取前进后退按钮元素var i=0;var iNow=0;for(i=0;i<gonext.length;i++){gonext[i].index=i;gonext[i].onmouseover=function(){starMove(gonext[this.index],'opacity',300);};gonext[i].onmouseout=function(){starMove(gonext[this.index],'opacity',0);};gonext[i].onclick=function(){if(this.className=='make_prevouse'){starMove(bLi[iNow],'top',390);bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);if(iNow==0){iNow=(bLi.length-1);bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';}else{iNow--;}bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';small_move(iNow);}else{starMove(bLi[iNow],'top',390);bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);if(iNow==(bLi.length-1)){iNow=0;bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';}else{iNow++;}bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';small_move(iNow);}};}

//小图点击事件处理for(i=0;i<sLi.length;i++){sLi[i].index=i;sLi[i].onclick=function(){if(this.index>iNow){starMove(bLi[iNow],'top',390);bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);if(iNow==(bLi.length-1)){iNow=0;bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';}else{iNow=this.index;}bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';small_move(iNow);}if(this.index<iNow){starMove(bLi[iNow],'top',390);bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);if(iNow==0){iNow=(bLi.length-1);bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';}else{iNow=this.index;}bLi[iNow].style.top='0px';bLi[iNow].style.zIndex='1';small_move(iNow);}};}sUl.style.width=sLi.length*(parseInt(getstyle(sLi[0],'width'))+10)+10+'px';for(i=0;i<oA.length;i++){oA[i].index=i;oA[i].onmouseover=function(){starMove(gonext[this.index],'opacity',60);};oA[i].onmouseout=function(){starMove(gonext[this.index],'opacity',0);};}

//小图移动function small_move(itarget){if(itarget==0||itarget==1){for(i=0;i<sLi.length;i++){if(i==itarget){sLi[i].style.filter='alpha(opacity:100)';sLi[i].style.opacity=1;}else{sLi[i].style.filter='alpha(opacity:30)';sLi[i].style.opacity=0.3;}}starMove(sUl,'left',0);}else if(itarget==(sLi.length-1)||itarget==(sLi.length-2)){for(i=0;i<sLi.length;i++){if(i==itarget){sLi[i].style.filter='alpha(opacity:100)';sLi[i].style.opacity=1;}else{sLi[i].style.filter='alpha(opacity:30)';sLi[i].style.opacity=0.3;}}starMove(sUl,'left',-(sLi.length-3)*160-5);}else {for(i=0;i<sLi.length;i++){if(i==itarget){sLi[i].style.filter='alpha(opacity:100)';sLi[i].style.opacity=1;}else{sLi[i].style.filter='alpha(opacity:30)';sLi[i].style.opacity=0.3;}}starMove(sUl,'left',-(itarget-1)*160);}}};

move.js

// JavaScript Document//准确获取标签样式function getstyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}//移动 框架function starMove(obj,attr,itarget){clearInterval(obj.timer);obj.timer=setInterval(function(){if(attr=='opacity'){var iCur=parseInt(parseFloat(getstyle(obj,attr))*100);}else{var iCur=parseInt(getstyle(obj,attr));}var ispeed=(itarget-iCur)/8;ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);if(iCur==itarget){obj.style[attr]=itarget+'px';clearInterval(obj.timer);}else{if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(iCur+ispeed)+')';obj.style.opacity=(iCur+ispeed)/100;}else{obj.style[attr]=iCur+ispeed+'px';}}},30);}

阅读全文

1 0