<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>mypaly</title>
<style type= "Text/css" >
* {margin:0; padding:0;}
UL, Li {list-style:none;}
body{
Text-align:center;
}
#play {
width:400px;
height:300px;
Position:absolute;
left:50%;
top:50%;
margin:-155px 0 0-205px;
Overflow:hidden;
}
#playimg {
width:400px;
height:300px;
Position:absolute;
}
#playimg li{
height:300px;
Overflow:hidden;
}
#playimg img{
width:400px;
height:300px;
}
#playbtn {
Position:absolute;
left:0;
bottom:5px;
}
#playbtn li{
Display:inline;
Background: #eee;
PADDING:2PX 5px;
margin:0 3px;
Cursor:pointer;
}
#playbtn. current{
Background: #f0f;
}
</style>
<script type= "Text/javascript" >
function $ (ID) {return document.getElementById (ID)}
function Moveelement (elementid,final_x,final_y,interval) {//This method is very clear in the Book of Dom Art.
if (!document.getelementbyid) return false;
if (!document.getelementbyid (ElementID)) return false;
var elem = document.getElementById (ElementID);
if (elem.movement) {
Cleartimeout (elem.movement);
}
if (!elem.style.left) {
Elem.style.left = "0px";
}
if (!elem.style.top) {
Elem.style.top = "0px";
}
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) {
var dist = Math.ceil ((final_x-xpos)/10);
xpos = xpos + dist;
}
if (Xpos > Final_x) {
var dist = Math.ceil ((xpos-final_x)/10);
Xpos = xpos-dist;
}
if (Ypos < final_y) {
var dist = Math.ceil ((final_y-ypos)/10);
ypos = ypos + dist;
}
if (Ypos > Final_y) {
var dist = Math.ceil ((ypos-final_y)/10);
Ypos = ypos-dist;
}
Elem.style.left = xpos + "px";
Elem.style.top = ypos + "px";
var repeat = "moveelement (' +elementid+", "+final_x+", "+final_y+", "+interval+") ";
Elem.movement = settimeout (repeat,interval);
}
function Imgchange (num) {//Toggle picture Focus
if (!$ (' play ')) return false;
var piclist=$ (' playimg '). getElementsByTagName (' img ');
var imgheight=piclist[0].offsetheight;
var movey=-(Imgheight*num);
Moveelement (' playimg ', 0,movey,5);
}
function Classtoggle (arr,n) {//toggle button style
for (Var i=0;i<arr.length;i++) {
Arr[i].classname= ';
}
Arr[n].classname= ' current ';
}
function Btnchange (btns) {//mouse mobile playback
if (!$ (Btns)) return false;
$ (' play '). onmouseover = function () {AutoKey = false};
$ (' play '). onmouseout = function () {AutoKey = true};
var arr=$ (btns). getElementsByTagName (' Li ');
for (Var i=0;i<arr.length;i++) {
arr[i].index=i;//Set index number
Arr[i].onmouseover=function () {
var num=index (This,arr);
Classtoggle (Arr,this.index);
Imgchange (This.index);
}
}
}
function Autochange (btns) {
if (!$ (Btns)) return false;
if (!autokey) return false;
var arr=$ (btns). getElementsByTagName (' Li ');
for (Var i=0;i<arr.length;i++) {
if (arr[i].classname== ' current ') {
var n=i+1;
}
}
if (n>=arr.length) n=0;
Classtoggle (Arr,n);
Imgchange (n);
}
var AutoKey = true;
SetInterval ("Autochange (' playbtn ')", 3000);
Window.onload=function () {
Btnchange (' playbtn ');
}
</script>
<body>
<div id= "Play" >
<ul id= "Playimg" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id= "playbtn" ><li class= "current" >1</li><li>2</li><li>3</li><li >4</li></ul>
</div>
</body>
