本文實例講述了js仿土豆網帶縮圖的焦點圖片切換效果實現方法。分享給大家供大家參考。具體實作方法如下: 複製程式碼 程式碼如下: 仿馬鈴薯網帶來了一個焦點圖片切換效果 <br /> /* 重設樣式 */<br /> * { 邊距:0;填充:0;斷字:打破所有; }<br /> 主體{背景:#FFF;顏色:#333;字型:12px/1.6em Helvetica、Arial、sans-serif; }<br /> h1、h2、h3、h4、h5、h6 { 字體大小:1em; }<br /> 一個{顏色:#039;文字裝飾:無; }<br /> a:hover { 文字裝飾:底線; }<br /> ul,li { 列表樣式:無; }<br /> 字段集,img { 邊框:無; }<br /> em、strong、cite、th { 字體樣式:正常;字體粗細:正常; }<br /> /* Focus_change 樣式 */<br /> #focus_change { 位置:相對;寬度:450px;高度:295 像素;溢出:隱藏;邊距:20px 0 1px 60px; }<br /> #focus_change_list { 位置:絕對;寬度:1800px;高度:295 像素; }<br /> #focus_change_list li { 浮動:左; }<br /> #focus_change_list li img { 寬度:450px;高度:295 像素; }<br /> .focus_change_opacity { 位置:絕對;寬度:450px;高度:70px;頂部:225px;左:0;背景:#000;過濾器:alpha(不透明度=50);-moz-不透明度:0.5;不透明度: 0.5; }<br /> #focus_change_btn { 位置:絕對;寬度:450px;高度:65 像素;頂部:225px;左:0; }<br /> #focus_change_btn ul { padding-left:5px; }<br /> #focus_change_btn li { 顯示:內聯;浮動:左;邊距:0 15px;頂部填充:12px; }<br /> #focus_change_btn li img { 寬度:76px;高度:50px;邊框:2px實心#888; }<br /> #focus_change_btn .current { 背景:url(/uploadfile/200901/1/6C164133877.gif) 無重複 37px 8px;}<br /> #focus_change_btn .current img { 邊框顏色:#EEE; }<br /> </風格><br /> <腳本類型=“text/javascript”><br /> 函數 $(id) { return document.getElementById(id); }<br /> function moveElement(elementID,final_x,final_y,interval) {<br /> if (!document.getElementById) return false;<br /> if (!document.getElementById(elementID)) return false;<br /> var elem = document.getElementById(elementID);<br /> if (elem.movement) {<br /> clearTimeout(elem.movement);<br /> }<br /> if (!elem.style.left) {<br /> elem.style.left = "0px";<br /> }<br /> if (!elem.style.top) {<br /> elem.style.top = "0px";<br /> }<br /> var xpos = parseInt(elem.style.left);<br /> var ypos = parseInt(elem.style.top);<br /> if (xpos == Final_x && ypos == Final_y) {<br /> 返回真;<br /> }<br /> if (xpos < Final_x) {<br /> var dist = Math.ceil((final_x - xpos)/10);<br /> xpos = xpos 距離;<br /> }<br /> if (xpos > Final_x) {<br /> var dist = Math.ceil((xpos - Final_x)/10);<br /> xpos = xpos - 距離;<br /> }<br /> if (ypos < Final_y) {<br /> var dist = Math.ceil((final_y - ypos)/10);<br /> ypos = ypos 距離;<br /> }<br /> if (ypos > Final_y) {<br /> var dist = Math.ceil((ypos - Final_y)/10);<br /> ypos = ypos - 距離;<br /> }<br /> elem.style.left = xpos "px";<br /> elem.style.top = ypos "px";<br /> varrepeat = "moveElement('"elementID"',"final_x","final_y","interval")";<br /> elem.movement = setTimeout(重複,間隔);<br /> }<br /> 函數 classNormal(){<br /> var focusBtnList = $('focus_change_btn').getElementsByTagName('li');<br /> for(var i=0; i<focusBtnList.length; i ) {<br /> focusBtnList[i].className='';<br /> }<br /> }<br /> 函數 focusChange() {<br /> var focusBtnList = $('focus_change_btn').getElementsByTagName('li');<br /> focusBtnList[0].onmouseover = function() {<br /> moveElement('focus_change_list',0,0,5);<br /> classNormal()<br /> focusBtnList[0].className='當前'<br /> }<br /> focusBtnList[1].onmouseover = function() {<br /> moveElement('focus_change_list',-450,0,5);<br /> classNormal()<br /> focusBtnList[1].className='當前'<br /> }<br /> focusBtnList[2].onmouseover = function() {<br /> moveElement('focus_change_list',-900,0,5);<br /> classNormal()<br /> focusBtnList[2].className='當前'<br /> }<br /> focusBtnList[3].onmouseover = function() {<br /> moveElement('focus_change_list',-1350,0,5);<br /> classNormal()<br /> focusBtnList[3].className='當前'<br /> }<br /> }<br /> setInterval('autoFocusChange()', 5000);<br /> var atuokey = false;<br /> 函數 autoFocusChange() {<br /> $('focus_change').onmouseover = function(){atuokey = true}<br /> $('focus_change').onmouseout = function(){atuokey = false}<br /> if(atuokey) 回傳;<br /> var focusBtnList = $('focus_change_btn').getElementsByTagName('li');<br /> for(var i=0; i<focusBtnList.length; i ) {<br /> if (focusBtnList[i].className == '當前') {<br /> var currentNum = i;<br /> }<br /> }<br /> if (currentNum==0 ){<br /> moveElement('focus_change_list',-450,0,5);<br /> classNormal()<br /> focusBtnList[1].className='當前'<br /> }<br />if (currentNum==1 ){<br /> moveElement('focus_change_list',-900,0,5);<br /> classNormal()<br /> focusBtnList[2].className='當前'<br /> }<br /> if (currentNum==2 ){<br /> moveElement('focus_change_list',-1350,0,5);<br /> classNormal()<br /> focusBtnList[3].className='當前'<br /> }<br /> if (currentNum==3 ){<br /> moveElement('focus_change_list',0,0,5);<br /> classNormal()<br /> focusBtnList[0].className='當前'<br /> }<br /> }<br /> window.onload=function(){<br /> focusChange();<br /> }<br /> </>腳本<br /> </頭><br /> <身體><br /> <div id="focus_change"><br /> <div id="focus_change_list" style="top:0; left:0;"><br /> <ul><br /> <li><a href="http://www.jb51.net/"><img src="/images/m03.jpg" alt="" /><br /> <li><a href="http://www.jb51.net/"><img src="/images/m04.jpg" alt="" /><br /> <li><a href="http://www.jb51.net/"><img src="/images/m09.jpg" alt="" /><br /> <li><a href="http://www.jb51.net/"><img src="/images/m10.jpg" alt="" /><br /> <br /> 身體> 希望本文對大家介紹的javascript程式設計有幫助。