html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片图片库</title>
<link href="css/prepareslideshow.css" rel="stylesheet" type="text/css">
<script src="js/addLoadEvent.js"></script>
<script src="js/move.js"></script>
<script src="js/prepareslideshow.js"></script>
</head>
<body>
<div id="warp">
<ul id="linklist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="slideShow">
<img src="images/DHpic.jpg" id="preview" alt="this is pic ">
</div>
</div>
</body>
</html>
js代码1:
function addLoadEvent(func)
{var oldonload=window.onload;
if(typeof window.onload!='function')
{window.onload=func;}
else
{window.onload=function()
{oldonload();
func();
}
}
}
addLoadEvent(prepareslideshow);
js代码2:
function moveElement(elementID,final_x,final_y,interval)
{
if(!document.getElementById)return false;
if(!document.getElementById(elementID))return false;
var elem=document.getElementById(elementID);
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y){return true};
if(xpos<final_x){xpos++};
if(xpos>final_x){xpos--};
if(ypos>final_y){ypos--};
if(ypos<final_y){ypos++};
elem.style.left= xpos+"px";
elem.style.top= ypos+"px";
movement=setTimeout(function repeat(){moveElement(elementID,final_x,final_y,interval)} ,interval)
}
js代码3:
function prepareslideshow()
{ //检查是否支持
if(!document.getElementById) return false;
if(!document.getElementsByTagName)return false;
//检查元素是否存在
if(!document.getElementById("linklist")) return false;
if(!document.getElementById("slideShow")) return false;
if(!document.getElementById("preview")) return false;
var preview=document.getElementById("preview");
var list=document.getElementById("linklist");
var links=list.get ElementsByTagName("a");
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)};
links[3].onmouseover=function()
{moveElement("preview",-800,0,10)};
}
幕布斯6393831
相关分类