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.οnlοad=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].οnmοuseοver=function() { starMove(gonext[this.index],'opacity',300); }; gonext[i].οnmοuseοut=function() { starMove(gonext[this.index],'opacity',0); }; gonext[i].οnclick=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].οnclick=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].οnmοuseοver=function() { starMove(gonext[this.index],'opacity',60); }; oA[i].οnmοuseοut=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); }
