<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>マイパリ</title> <br><style type="text/css"> <br>* { マージン:0;パディング:0;} <br>ul, li { list-style:none;} <br>body{ <br>text-align:center; <br>} <br>#play{ <br>width:400px; <br>高さ:300ピクセル; <br>位置:絶対; <br>左:50%; <br>トップ:50%; <br>マージン:-155px 0 0 -205px; <br>オーバーフロー:非表示; <br><br>} <br>#playimg{ <br>width:400px; <br>高さ:300ピクセル; <br>位置:絶対; <br>} <br>#playimg li{ <br>高さ:300px; <br>オーバーフロー:非表示; <br>} <br>#playimg img{ <br>width:400px; <br>高さ:300ピクセル; <br>} <br>#playbtn{ <br>位置:絶対; <br>左:0; <br>下:5px; <br>} <br>#playbtn li{ <br>display:inline; <br>背景:#eee; <br>パディング:2px 5px; <br>マージン:0 3px; <br>カーソル:ポインタ; <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) false を返します。 <br>if (!document.getElementById(elementID)) は false を返します。 <br>var elem = document.getElementById(要素ID); <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>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>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>varrepeat = "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>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>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) は false を返します。 <br>var arr=$(btns).getElementsByTagName('li'); <br>for(var i=0;i<arr.length>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></head> <br><br> <br><div id="play"> <br><ul id="playimg"> <br><li><img src="../images/Blue Hills.jpg" alt="" /></li> <br><li><img src="../images/Sunset.jpg" alt="" /></li> <br><li><img src="../images/睡蓮.jpg" alt="" /></li> <br><li><img src="../images/Winter.jpg" alt="" /></li> <br> <br><ul id="playbtn"><li class="current">1</li><li>2</li><li>3</li><li> 4</li></ul> <br></arr.length></arr.length></arr.length></final_y></final_x> </div> <br></body> <br></html> <br>
