JS焦点图切换，上下翻转_典型特效

复制代码 代码如下: mypaly * { 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; } function $(id){return document.getElementById(id)} function moveElement(elementID,final_x,final_y,interval) {//这个方法在DOM艺术那个书上讲的很清楚 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 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 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){//切换图片焦点 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){//切换按钮样式 for(var i=0;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[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 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'); } 1 2 3 4

JS焦点图切换，上下翻转_典型特效

Articles Liés