本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: 仿土豆网带缩略图的焦点图片切换效果 <br /> /* Reset style */<br /> * { margin:0; padding:0; word-break:break-all; }<br /> body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }<br /> h1, h2, h3, h4, h5, h6 { font-size:1em; }<br /> a { color:#039; text-decoration:none; }<br /> a:hover { text-decoration:underline; }<br /> ul, li { list-style:none; }<br /> fieldset, img { border:none; }<br /> em, strong, cite, th { font-style:normal; font-weight:normal; }<br /> /* Focus_change style */<br /> #focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }<br /> #focus_change_list { position:absolute; width:1800px; height:295px; }<br /> #focus_change_list li { float:left; }<br /> #focus_change_list li img { width:450px; height:295px; }<br /> .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; }<br /> #focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }<br /> #focus_change_btn ul { padding-left:5px; }<br /> #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }<br /> #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }<br /> #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}<br /> #focus_change_btn .current img { border-color:#EEE; }<br /> <br /> function $(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 /> return true;<br /> }<br /> if (xpos < final_x) {<br /> var dist = Math.ceil((final_x - xpos)/10);<br /> xpos = xpos + dist;<br /> }<br /> if (xpos > final_x) {<br /> var dist = Math.ceil((xpos - final_x)/10);<br /> xpos = xpos - dist;<br /> }<br /> if (ypos < final_y) {<br /> var dist = Math.ceil((final_y - ypos)/10);<br /> ypos = ypos + dist;<br /> }<br /> if (ypos > final_y) {<br /> var dist = Math.ceil((ypos - final_y)/10);<br /> ypos = ypos - dist;<br /> }<br /> elem.style.left = xpos + "px";<br /> elem.style.top = ypos + "px";<br /> var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";<br /> elem.movement = setTimeout(repeat,interval);<br /> }<br /> function 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 /> function 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='current'<br /> }<br /> focusBtnList[1].onmouseover = function() {<br /> moveElement('focus_change_list',-450,0,5);<br /> classNormal()<br /> focusBtnList[1].className='current'<br /> }<br /> focusBtnList[2].onmouseover = function() {<br /> moveElement('focus_change_list',-900,0,5);<br /> classNormal()<br /> focusBtnList[2].className='current'<br /> }<br /> focusBtnList[3].onmouseover = function() {<br /> moveElement('focus_change_list',-1350,0,5);<br /> classNormal()<br /> focusBtnList[3].className='current'<br /> }<br /> }<br /> setInterval('autoFocusChange()', 5000);<br /> var atuokey = false;<br /> function autoFocusChange() {<br /> $('focus_change').onmouseover = function(){atuokey = true}<br /> $('focus_change').onmouseout = function(){atuokey = false}<br /> if(atuokey) return;<br /> var focusBtnList = $('focus_change_btn').getElementsByTagName('li');<br /> for(var i=0; i<focusBtnList.length; i++) {<br /> if (focusBtnList[i].className == 'current') {<br /> var currentNum = i;<br /> }<br /> }<br /> if (currentNum==0 ){<br /> moveElement('focus_change_list',-450,0,5);<br /> classNormal()<br /> focusBtnList[1].className='current'<br /> }<br /> if (currentNum==1 ){<br /> moveElement('focus_change_list',-900,0,5);<br /> classNormal()<br /> focusBtnList[2].className='current'<br /> }<br /> if (currentNum==2 ){<br /> moveElement('focus_change_list',-1350,0,5);<br /> classNormal()<br /> focusBtnList[3].className='current'<br /> }<br /> if (currentNum==3 ){<br /> moveElement('focus_change_list',0,0,5);<br /> classNormal()<br /> focusBtnList[0].className='current'<br /> }<br /> }<br /> window.onload=function(){<br /> focusChange();<br /> }<br /> 希望本文所述对大家的javascript程序设计有所帮助。