<div class="codetitle"> <span><a style="CURSOR: pointer" data="1121" class="copybut" id="copybut1121" onclick="doCopy('code1121')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code1121"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>mypaly</title> <br><style type="text/css"> <BR>* { margin:0; padding:0;} <BR>ul, li { list-style:none;} <BR>body{ <BR>text-align:center; <BR>} <BR>#play{ <BR>width:400px; <BR>height:300px; <BR>position:absolute; <BR>left:50%; <BR>top:50%; <BR>margin:-155px 0 0 -205px; <BR>overflow:hidden; <br><br>} <BR>#playimg{ <BR>width:400px; <BR>height:300px; <BR>position:absolute; <BR>} <BR>#playimg li{ <BR>height:300px; <BR>overflow:hidden; <BR>} <BR>#playimg img{ <BR>width:400px; <BR>height:300px; <BR>} <BR>#playbtn{ <BR>position:absolute; <BR>left:0; <BR>bottom:5px; <BR>} <BR>#playbtn li{ <BR>display:inline; <BR>background:#eee; <BR>padding:2px 5px; <BR>margin:0 3px; <BR>cursor:pointer; <BR>} <BR>#playbtn .current{ <BR>background:#f0f; <BR>} <BR></style> <br><script type="text/javascript"> <BR>function $(id){return document.getElementById(id)} <BR>function moveElement(elementID,final_x,final_y,interval) {//这个方法在DOM艺术那个书上讲的很清楚 <BR>if (!document.getElementById) return false; <BR>if (!document.getElementById(elementID)) return false; <BR>var elem = document.getElementById(elementID); <BR>if (elem.movement) { <BR>clearTimeout(elem.movement); <BR>} <BR>if (!elem.style.left) { <BR>elem.style.left = "0px"; <BR>} <BR>if (!elem.style.top) { <BR>elem.style.top = "0px"; <BR>} <BR>var xpos = parseInt(elem.style.left); <BR>var ypos = parseInt(elem.style.top); <BR>if (xpos == final_x && ypos == final_y) { <BR>return true; <BR>} <BR>if (xpos < final_x) { <BR>var dist = Math.ceil((final_x - xpos)/10); <BR>xpos = xpos + dist; <BR>} <BR>if (xpos > final_x) { <BR>var dist = Math.ceil((xpos - final_x)/10); <BR>xpos = xpos - dist; <BR>} <BR>if (ypos < final_y) { <BR>var dist = Math.ceil((final_y - ypos)/10); <BR>ypos = ypos + dist; <BR>} <BR>if (ypos > final_y) { <BR>var dist = Math.ceil((ypos - final_y)/10); <BR>ypos = ypos - dist; <BR>} <BR>elem.style.left = xpos + "px"; <BR>elem.style.top = ypos + "px"; <BR>var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; <BR>elem.movement = setTimeout(repeat,interval); <BR>} <BR>function imgChange(num){//切换图片焦点 <BR>if(!$('play')) return false; <BR>var piclist=$('playimg').getElementsByTagName('img'); <BR>var imgheight=piclist[0].offsetHeight; <BR>var moveY=-(imgheight*num); <BR>moveElement('playimg',0,moveY,5); <BR>} <BR>function classToggle(arr,n){//切换按钮样式 <BR>for(var i=0;i<arr.length;i++){ <BR>arr[i].className=''; <BR>} <BR>arr[n].className='current'; <BR>} <BR>function btnChange(btns){//鼠标移动播放 <BR>if(!$(btns)) return false; <BR>$('play').onmouseover = function(){autokey = false}; <BR>$('play').onmouseout = function(){autokey = true}; <BR>var arr=$(btns).getElementsByTagName('li'); <BR>for(var i=0;i<arr.length;i++){ <BR>arr[i].index=i;//设置索引号 <BR>arr[i].onmouseover=function(){ <BR>//var num=index(this,arr); <BR>classToggle(arr,this.index); <BR>imgChange(this.index); <BR>} <BR>} <BR>} <BR>function autoChange(btns){ <BR>if(!$(btns)) return false; <BR>if(!autokey) return false; <BR>var arr=$(btns).getElementsByTagName('li'); <BR>for(var i=0;i<arr.length;i++){ <BR>if(arr[i].className=='current'){ <BR>var n=i+1; <BR>} <BR>} <BR>if(n>=arr.length) n=0; <BR>classToggle(arr,n); <BR>imgChange(n); <BR>} <BR>var autokey = true; <BR>setInterval("autoChange('playbtn')",3000); <BR>window.onload=function(){ <BR>btnChange('playbtn'); <BR>} <BR></script> <br> <br><br> <br><div id="play"> <br><ul id="playimg"> <br><li><img src="/static/imghwm/default1.png" data-src="../images/Sunset.jpg" class="lazy" alt=""></li> <br><li><img src="/static/imghwm/default1.png" data-src="../images/Sunset.jpg" class="lazy" alt=""></li> <br><li><img src="/static/imghwm/default1.png" data-src="../images/Winter.jpg" class="lazy" alt=""></li> <br><li><img src="/static/imghwm/default1.png" data-src="../images/Winter.jpg" class="lazy" alt=""></li> <br> </ul> <br><ul id="playbtn"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <br> </div> <br> <br> <br> </div>
