Tip: you can modify some code before running
<p><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><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></p><script type="text/javascript">Function $ (id) {return document. getElementById (id)} function moveElement (elementID, final_x, final_y, interval) {// This method is clear in the DOM art book 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) {// switch the image 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) {// switch button style for (var I = 0; I<arr.length;i++){ arr[i].className=''; } arr[n].className='current'; } function btnChange(btns){//鼠标移动播放 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;//设置索引号 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><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>
Tip: you can modify some code before running
