JS焦点图切换，上下翻转

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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) {//这个方法在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 < 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){//切换图片焦点 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.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> </head> <body> <div id="play"> <ul id="playimg"> <li><img src="../images/Blue hills.jpg" alt="" /></li> <li><img src="../images/Sunset.jpg" alt="" /></li> <li><img src="../images/Water lilies.jpg" alt="" /></li> <li><img src="../images/Winter.jpg" alt="" /></li> </ul> <ul id="playbtn"><li class="current">1</li><li>2</li><li>3</li><li>4</li></ul> </div> </body> </html>

jquery代码复制代码代码如下: $(function() { $("#DropDownList1").bind("change", function() { $("#Label1").text($("#DropDownList1 option:selected").text()); }); 或者复制代码代码如下: $("#DropDownL>>>详细阅读

本文标题：JS焦点图切换，上下翻转

地址：http://www.17bianji.com/kaifa2/JS/24601.html

1/2 1