<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>
