半透明圖片移動投影片播放效果

一個比較漂亮的控制圖片移動的網頁效果

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background: # fff;左：400px;邊框：3px實心#666666;} .imgbox{位置：絕對;左：35px；上邊距：20px；頂部：105px； z 指數：90；寬度：100px；高度：100px；背景：#ffffff} .moveimgbox{位置：絕對；左：700 像素；上邊距：20px；頂部：105px； z 指數：90；寬度：100px；高度：100px；背景：#ffffff} </style> <script> var ticked=0; var OKToGo = true; var 當前生物 = 1; var 向前後 = 1; var 第一個數 = 1; var secnum = 2; var tounum=1;函數 moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); }勾選=0；向前向後 = 1; OKToGo=真； }其他{okayToGo = false; thisAngle = (Math.PI/2)*(勾選/1000); document.getElementById("y"+firstnum).style.left = "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px";勾選 += 20； } } </script> <a href="javascript:moveItem(1,tounum);"><img src="/img/200406301.jpg" width="129" height="97"></a> < a href="javascript:moveItem(2,tounum);"><img src="/img/200406302.jpg" width="134" height="100"></a><br/> <a href= "javascript:moveItem(3,tounum);"><img src="/img/200406303.jpg" width="134" height="100"></a> <a href="javascript:moveItem(4, tounum);"><img src="/img/200406304.jpg" width="101" height="134"></a> <divalign="right" id="mainid"> <div id=" y1 " class="imgbox"><img src="/img/200406301.jpg" width="400" height="300"></div> <div id="y2" class="moveimgbox"><img src ="/img/200406302.jpg" width="400" height="300"></div> <div id="y3" class="moveimgbox"><img src="/img/200406303.jpg"寬度=“387”高度=“290”></div><div id=“y4”class=“moveimgbox”><img src=“/img/200406304.jpg”寬度=“281”高度=“374” > </div> </div>