- <!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=gb2312" />
- <title>js滑动菜单</title>
- <style>
- * {margin:0; padding:0}
- .sm {list-style:none; width:760px; height:200px; display:block; overflow:hidden}
- .sm li {float:left; display:inline; overflow:hidden}
- </style>
- <script type="text/javascript">
- var slideMenu=function(){
- var sp,st,t,m,sa,l,w,sw,ot;
- return{
- build:function(sm,sw,mt,s,sl,h){
- sp=s; st=sw; t=mt;
- m=document.getElementById(sm);
- sa=m.getElementsByTagName('li');
- l=sa.length; w=m.offsetWidth; sw=w/l;
- ot=Math.floor((w-st)/(l-1)); var i=0;
- for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
- if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
- },
- timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},
- slide:function(s){
- var cw=parseInt(s.style.width,'10');
- if(cw<st){
- var owt=0; var i=0;
- for(i;i<l;i++){
- if(sa[i]!=s){
- var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
- if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
- owt=owt+(ow-oi)}}
- s.style.width=(w-owt)+'px';
- }else{clearInterval(m.timer)}
- }
- };
- }();
- </script>
- </head>
- <body onload="slideMenu.build('sm',310,10,10,1)">
- <ul id="sm" class="sm">
- <li><a href="www.013.com"><img src="http://www.3787.com.cn/shou/img/iframe_files/1.jpg" alt="" height="310" border="0" /></a></li>
- <li><img src="http://www.3787.com.cn/shou/img/iframe_files/3.jpg" alt="" /></li>
- <li><img src="http://www.3787.com.cn/shou/img/iframe_files/4.jpg" alt="" /></li>
- <li><img src="http://www.3787.com.cn/shou/img/iframe_files/2.jpg" alt="" /></li>
- <li><img src="http://www.3787.com.cn/shou/img/iframe_files/2.jpg" alt="" /></li>
- </ul>
- </body>
- </html>
复制代码 |