一个比较个性的图片切换，鼠标移到图片上，等待一会图片切换的速度会越来越快，几乎要旋转起来了。 本效果不太实用，就算是给大家一个研究和学习js的例子吧，欢迎大家提出宝贵意见。 效果： <html><br /> <head><br /> <title>感应鼠标快速切换图片的<b>Java</b>Script效果</title><br /> <meta http-equiv="content-type" content="text/html;charset=gb2312"><br /> <style type="text/css"><br /> #js_F{position:relative;top:10px;left:10px;overflow:hidden;width:150px;height:200px;}<br /> #js_F img{position:absolute;top:0;left:0;}<br /> </style><br /> </head><br /> <body><br /> 鼠标移到图片上，等待一会图片切换速度会越来越快！<br><br /> <div id="js_F"></div><br /> <script type="text/javascript"><br /> <!--///*--><![CDATA[/*><!--*/<br /> var js_F = document.getElementById("js_F");<br /> var imgList = ["/uploads/common/images/s_p2.jpg", "/uploads/common/images/s_p3.jpg", "/uploads/common/images/s_p4.jpg", "/uploads/common/images/s_p5.jpg" ];<br /> var imgTemp = new Array();<br /> for (i=0; i<imgList.length; i++){<br /> imgTemp[i] = new Image();<br /> imgTemp[i].src = imgList[i];<br /> }<br /> var imgs = new Array();<br /> var imgID = 0, nextImgID, proveImgID;<br /> var tf = true;<br /> var speed1 = 10; speed2 = 500;//速度<br /> function imgInit(){<br /> var content = '';<br /> for (i=0; i<imgList.length; i++){<br /> content += '<img src="' + imgList[i] + '" style="left:0;" />\n';<br /> }<br /> js_F.innerHTML = content;<br /> imgs = js_F.getElementsByTagName('img');<br /> imgs[0].style.zIndex = 20;<br /> imgs[1].style.zIndex = 15;<br /> }<br /> function imgChange(){<br /> if ((imgID+1)<imgList.length){<br /> nextImgID = imgID + 1;<br /> } else if (imgID<imgList.length) {<br /> nextImgID = 0;<br /> } else {<br /> imgID = 0;<br /> nextImgID = imgID + 1;<br /> }<br /> imgs[imgID].style.zIndex = 20;<br /> imgs[nextImgID].style.zIndex = 15;<br /> var ttt=setTimeout('imgShow()',speed2);<br /> js_F.onmouseover=function(){clearTimeout(ttt)};<br /> js_F.onmouseout=function(){setTimeout('imgShow()',speed2)};<br /> }<br /> function imgShow(){<br /> if (tf){<br /> if (parseInt(imgs[imgID].style.left)>-180){<br /> imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px';<br /> imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px';<br /> setTimeout('imgShow()',speed1);<br /> } else {<br /> tf = !tf;<br /> imgs[imgID].style.zIndex = 15;<br /> imgs[nextImgID].style.zIndex = 20;<br /> setTimeout('imgShow()',speed1);<br /> }<br /> } else {<br /> if (parseInt(imgs[imgID].style.left)<0){<br /> imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)+10) + 'px';<br /> imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)-5) + 'px';<br /> setTimeout('imgShow()',speed1);<br /> } else {<br /> imgs[imgID].style.zIndex = 10;<br /> tf = !tf;<br /> imgID++;<br /> imgChange();<br /> }<br /> }<br /> }<br /> imgInit();<br /> imgChange();<br /> /*]]>*///--><br /> </script><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 渐近动画显示的图片切换,基于jQuery1.4实现纯Css实现图片阴影代码 非常逼真的效果
