<html> <head> <title></title> <style> #slideshow{width:256px;height: 256px;position:relative;overflow: hidden;} </style> </head> <body> <h1>Web Design</h1> <p>There are things you should know</p> <ol id="linklist"> <li><a href="1">1</a></li> <li><a href="2">2</a></li> <li><a href="3">3</a></li> </ol> <div id="slideshow"> <img src="images/topics.jpg" alt="web design" id="preview"> </div> <script> function addLoadEvent(func){ var oldonload = window.onload; if (typeof oldonload != 'function') { window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } function prepareSlideShow(){ var preview = document.getElementById("preview"); preview.style.position = "absolute"; preview.style.left = 0; preview.style.top = 0; var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { links[i].onmouseover = function(){ var order = parseInt(this.getAttribute("href")); movePreview("preview",(-256*(order-1))); } } } addLoadEvent(prepareSlideShow); function movePreview(id,xpos){ var elem = document.getElementById(id); if (elem.movevent) { clearTimeout(elem.movevent); } var lpos = parseInt(elem.style.left),dist; if (lpos == xpos) return true; /*每次移动1px速度太慢,所以每次移动差距的1/10,当差距< 10 时,dist是小数 所以采用ceil函数(也就是以1px为单位) 变化,直到相等*/ if (lpos < xpos) { dist = Math.ceil((xpos - lpos)/10); lpos+=dist; } if (lpos > xpos) { dist = Math.ceil((lpos - xpos)/10); lpos-=dist; } elem.style.left = lpos; elem.movevent = setTimeout("movePreview('"+id+"',"+xpos+")",10); } </script> </body> </html>