Js 轮转图片,JS很强大

2008-11-14 11:11:00

1.对焦点图片下方进行透明处理.兼容ie6 ie7 ff透明效果 2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果 3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换 曾一度沉迷AS,真有点让我重新温习JS的冲动! [html] <!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;&#34;> <html xmlns=&#34;&#34;> <head> <meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /> <title>byzuo.cn---焦点图片 </title> <style type=&#34;text/css&#34;> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#039; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } /* Focus_change style */ #focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } #focus_change_list { position:absolute; width:1800px; height:295px; } #focus_change_list li { float:left; } #focus_change_list li img { width:450px; height:295px; } .focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; } #focus_change_btn ul { padding-left:5px; } #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; } #focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;} #focus_change_btn .current img { border-color:#EEE; } </style> <script type=&#34;text/javascript&#34;> function $(id) { return document.getElementById(id); } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = &#34;0px&#34;; } if (!elem.style.top) { elem.style.top = &#34;0px&#34;; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x &amp;&amp; ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + &#34;px&#34;; elem.style.top = ypos + &#34;px&#34;; var repeat = &#34;moveElement(&#39;&#34;+elementID+&#34;&#39;,&#34;+final_x+&#34;,&#34;+final_y+&#34;,&#34;+interval+&#34;)&#34;; elem.movement = setTimeout(repeat,interval); } function classNormal(){ var focusBtnList = $(&#39;focus_change_btn&#39;).getElementsByTagName(&#39;li&#39;); for(var i=0; i<focusBtnList.length; i++) { focusBtnList[i].className=&#39;&#39;; } } function focusChange() { var focusBtnList = $(&#39;focus_change_btn&#39;).getElementsByTagName(&#39;li&#39;); focusBtnList[0].onmouseover = function() { moveElement(&#39;focus_change_list&#39;,0,0,5); classNormal() focusBtnList[0].className=&#39;current&#39; } focusBtnList[1].onmouseover = function() { moveElement(&#39;focus_change_list&#39;,-450,0,5); classNormal() focusBtnList[1].className=&#39;current&#39; } focusBtnList[2].onmouseover = function() { moveElement(&#39;focus_change_list&#39;,-900,0,5); classNormal() focusBtnList[2].className=&#39;current&#39; } focusBtnList[3].onmouseover = function() { moveElement(&#39;focus_change_list&#39;,-1350,0,5); classNormal() focusBtnList[3].className=&#39;current&#39; } } setInterval(&#39;autoFocusChange()&#39;, 5000); function autoFocusChange() { var focusBtnList = $(&#39;focus_change_btn&#39;).getElementsByTagName(&#39;li&#39;); for(var i=0; i<focusBtnList.length; i++) { if (focusBtnList[i].className == &#39;current&#39;) { var currentNum = i; } } if (currentNum==0 ){ moveElement(&#39;focus_change_list&#39;,-450,0,5); classNormal() focusBtnList[1].className=&#39;current&#39; } if (currentNum==1 ){ moveElement(&#39;focus_change_list&#39;,-900,0,5); classNormal() focusBtnList[2].className=&#39;current&#39; } if (currentNum==2 ){ moveElement(&#39;focus_change_list&#39;,-1350,0,5); classNormal() focusBtnList[3].className=&#39;current&#39; } if (currentNum==3 ){ moveElement(&#39;focus_change_list&#39;,0,0,5); classNormal() focusBtnList[0].className=&#39;current&#39; } } window.onload=function(){ focusChange(); } </script> </head> <body> <div id=&#34;focus_change&#34;> <div id=&#34;focus_change_list&#34; style=&#34;top:0; left:0;&#34;> <ul> <li><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/01.jpg&#34; alt=&#34;&#34; /></li> <li><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/02.jpg&#34; alt=&#34;&#34; /></li> <li><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/03.jpg&#34; alt=&#34;&#34; /></li> <li><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/04.jpg&#34; alt=&#34;&#34; /></li> </ul> </div> <div class=&#34;focus_change_opacity&#34;></div> <div id=&#34;focus_change_btn&#34;> <ul> <li class=&#34;current&#34;><a href=&#34;#&#34;><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/btn_01.jpg&#34; alt=&#34;&#34; /></a></li> <li><a href=&#34;#&#34;><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/btn_02.jpg&#34; alt=&#34;&#34; /></a></li> <li><a href=&#34;#&#34;><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/btn_03.jpg&#34; alt=&#34;&#34; /></a></li> <li><a href=&#34;#&#34;><img src=&#34;http://www.byzuo.cn/demo/focus_change/img/btn_04.jpg&#34; alt=&#34;&#34; /></a></li> </ul> </div> </div><!--focus_change end--> </body> </html>[/html][down=attachments/month_0811/v20081114114730.rar]点击下载源码[/down]