[t]仿FLASH的图片轮换效果
需要运用运动框架move.js，
核心思路和选项卡相似，
下面就是具体实现方法：
html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>仿FLASH的图片轮换效果 —— www.miaov.com 妙味课堂</title> 6 <link rel="stylesheet" type="text/css" href="miao_style.css"> 7 <script type="text/javascript" src="../move.js"> 8 </script> 9 </head> 10 <body> 11 <div id="playimages" class="play"> 12 <ul class="big_pic"> 13 <div class="prev"> 14 </div> 15 <div class="next"> 16 </div> 17 <div class="text"> 18 加载图片说明…… 19 </div> 20 <div class="length"> 21 计算图片数量…… 22 </div> 23 <a class="mark_left" href="javascript:;"></a> 24 <a class="mark_right" href="javascript:;"></a> 25 <div class="bg"> 26 </div> 27 <li style="z-index:1;"> 28 <img src="images/1.jpg" /> 29 </li> 30 <li> 31 <img src="images/2.jpg" /> 32 </li> 33 <li> 34 <img src="images/3.jpg" /> 35 </li> 36 <li> 37 <img src="images/4.jpg" /> 38 </li> 39 <li> 40 <img src="images/5.jpg" /> 41 </li> 42 <li> 43 <img src="images/6.jpg" /> 44 </li> 45 </ul> 46 <div class="small_pic"> 47 <ul style="width:390px;"> 48 <li style="filter: 100; opacity: 1;"> 49 <img src="images/1.jpg" /> 50 </li> 51 <li> 52 <img src="images/2.jpg" /> 53 </li> 54 <li> 55 <img src="images/3.jpg" /> 56 </li> 57 <li> 58 <img src="images/4.jpg" /> 59 </li> 60 <li> 61 <img src="images/5.jpg" /> 62 </li> 63 <li> 64 <img src="images/6.jpg" /> 65 </li> 66 </ul> 67 </div> 68 </div> 69 </body> 70 </html>
CSS
1 body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; } 2 3 .play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; } 4 5 .big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; } 6 .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; } 7 8 .mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; } 9 .mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; } 10 .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; } 11 .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; } 12 13 .big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; } 14 .big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; } 15 .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; } 16 .small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; } 17 .small_pic ul { height: 94px; position: absolute; top: 0; left: 0; } 18 .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; } 19 .small_pic img { width: 120px; height: 94px; }
JS
1 function getByClass(obj, sClass){ 2 var aEle = obj.getElementsByTagName('*'); 3 var result = []; 4 var i = 0; 5 6 for (i = 0; i < aEle.length; i++) { 7 if (aEle[i].className == sClass) { 8 result.push(aEle[i]); 9 } 10 } 11 return result; 12 } 13 14 window.onload = function(){ 15 var oDiv = document.getElementById('playimages'); 16 17 var oMarkLeft = getByClass(oDiv, 'mark_left')[0]; 18 var oMarkRight = getByClass(oDiv, 'mark_right')[0]; 19 var oBtnPrev = getByClass(oDiv, 'prev')[0]; 20 var oBtnNext = getByClass(oDiv, 'next')[0]; 21 22 var oUlSmall = getByClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0]; 23 var aLiBtn = oUlSmall.getElementsByTagName('li'); 24 var oUlBig = getByClass(oDiv, 'big_pic')[0]; 25 var aLiPic = oUlBig.getElementsByTagName('li'); 26 var iMinZindex = 2; 27 var iNow = 0; 28 var i = 0; 29 30 oUlSmall.style.width = aLiBtn[0].offsetWidth * aLiBtn.length + 'px'; 31 32 oBtnPrev.onmouseover = oMarkLeft.onmouseover = function(){ 33 startMove(oBtnPrev, 'opacity', 100); 34 }; 35 oBtnPrev.onmouseout = oMarkLeft.onmouseout = function(){ 36 startMove(oBtnPrev, 'opacity', 0); 37 }; 38 39 oUlSmall.style.width = aLiBtn[0].offsetWidth * aLiBtn.length + 'px'; 40 41 oBtnNext.onmouseover = oMarkRight.onmouseover = function(){ 42 startMove(oBtnNext, 'opacity', 100); 43 }; 44 oBtnNext.onmouseout = oMarkRight.onmouseout = function(){ 45 startMove(oBtnNext, 'opacity', 0); 46 }; 47 48 for (var i = 0; i < aLiBtn.length; i++) { 49 aLiBtn[i].index = i; 50 aLiBtn[i].onclick = function(){ 51 if (this.index != iNow) { 52 iNow = this.index; 53 tab(); 54 } 55 }; 56 }; 57 58 oBtnPrev.onclick = function(){ 59 iNow--; 60 if (iNow == -1) { 61 iNow = aLiPic.length - 1; 62 } 63 tab(); 64 } 65 oBtnNext.onclick = function(){ 66 iNow++; 67 if (iNow == aLiPic.length) { 68 iNow = 0; 69 } 70 tab(); 71 } 72 73 function tab(){ 74 for (var i = 0; i < aLiBtn.length; i++) { 75 startMove(aLiBtn[i], 'opacity', 60); 76 } 77 startMove(aLiBtn[iNow], 'opacity', 100); 78 79 aLiPic[iNow].style.zIndex = iMinZindex++; 80 aLiPic[iNow].style.height = 0; 81 startMove(aLiPic[iNow], 'height', oUlBig.offsetHeight); 82 83 if (iNow == 0) { 84 startMove(oUlSmall, 'left', 0); 85 } 86 else 87 if (iNow == aLiBtn.length - 1) { 88 startMove(oUlSmall, 'left', -aLiBtn[0].offsetWidth * (iNow - 2)); 89 } 90 else { 91 startMove(oUlSmall, 'left', -aLiBtn[0].offsetWidth * (iNow - 1)); 92 } 93 } 94 };
