鼠标移动到链接上，触发onmouseover事件，然后通过函数实现下面的图片轮播。这个demo实现了行为层，表示层，结构层完全分离。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/layout.css" />
</head>
<body>
<h1>WEB DESIGN</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li><a href="structure.html">Structure</a></li>
<li><a href="presentation.html">presentation</a></li>
<li><a href="behavior.html">behavior</a></li>
</ol>
<script src="js/addLoadEvent.js"></script>
<script src="js/moveElement.js"></script>
<script src="js/prepareSlideshow.js"></script>
<script src="js/insertAfter.js"></script>
</body>
</html>
css：
#slideshow{
200px;
height: 200px;
position: relative;
overflow: hidden;
}
#preview{
position: absolute;
}
js：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function moveElement(elementID,final_x,final_y,interval) {
//检查浏览器支持情况
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
//取得元素ID值并赋值给elem
var elem = document.getElementById(elementID);
//清除movement已经有的属性，使其复位
if (elem.movement){
clearTimeout(elem.movement);
}
//检测元素是否有left top值，如果没有添加0px
if (!elem.style.left){
elem.style.left = "0px";
}
if (!elem.style.top){
elem.style.top = "0px";
}
//通过parseInt函数把style值转换成number类型
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
//判断xpos ypos是否和最终坐标相等
if (xpos == final_x && ypos == final_y){
return true;
}
//不相等时候，xpos ypos进行相应的变化
//每次移动起点与终点距离的十分之一，math.celi函数返回一个不小于dist的整数
//例：math.ceil（0.7）=1，math.ceil（0.1）=1
if (xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
//把xpos ypos赋值给elem的style.left .right，然后再加上px
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
//通过自调用实现重复执行
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
//movement是elem一个属性
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow() {
//检查浏览器支持情况，文档里面是否有ID为linklist的元素
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("linklist")) return false;
//创建一个div，并设置id属性
var slideshow = document.createElement("div");
slideshow.setAttribute("id","slideshow");
//创建一个img，并设置src alt id属性
var preview = document.createElement("img");
preview.setAttribute("src","img/toppics.png");
preview.setAttribute("alt","xxxxxxx");
preview.setAttribute("id","preview");
//把img添加到div里面
slideshow.appendChild(preview);
var list = document.getElementById("linklist");
//把div添加到文档list后面
insertAfter(slideshow,list);
var links = list.getElementsByTagName("a");
//给a标签添加鼠标事件，事件调用moveelement函数完成图片移动
links[0].onmouseover = function () {
moveElement("preview",-200,0,10);
}
links[1].onmouseover = function () {
moveElement("preview",-400,0,10);
}
links[2].onmouseover =function () {
moveElement("preview",-600,0,10);
}
}
addLoadEvent(prepareSlideshow);