关于JAVESCRIPT的一个小问题，在线等，哪位大哥教我一下

本帖最后由 asiacard 于 2009-06-30 13:24:53 编辑

解决方案 »

  1.   


    /* Focus_change style */ 
    #focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } 
    #focus_change_list { position:absolute; width:1800px; height:295px; } 
      #focus_change_list li { float:left; } 
      #focus_change_list li img { width:100px; height:100px; } 
    .focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } 
    #focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; } 
      #focus_change_btn ul { padding-left:5px; } 
      #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } 
      #focus_change_btn li img { width:100px; height:100px; border:2px solid #888; } 
      #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;} 
      #focus_change_btn .current img { border-color:#EEE; } 
      

  2.   

    我要改成600的宽度怎么改呢  我不懂JAVESCRIPT  你们先保存下来打开看一下我的代码运行什么效果在告诉我怎么改谢谢了
      

  3.   

    你不是有个样式么？ #focus_change_list li img { width:450px; height:295px; } 
    改下这个 width 就是了，不会改了这个宽度的话你就要改你的js，因为你的js里的 0，450，900，1350 等都是图片宽度的整倍数，所以，你要改成width：500px 那js 里的数据，就要换成 0,500,1000,1500 了
    建议你获取图片的样式宽度 document.getElementById('focus_change_list').getElementsByTagName('img')[0].style.width
      

  4.   

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片转换</title>
    <style type="text/css">
    /* Reset style */
    * { margin:0; padding:0; word-break:break-all; }
    body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
    h1, h2, h3, h4, h5, h6 { font-size:1em; }
    a { color:#039; text-decoration:none; }
     a:hover { text-decoration:underline; }
    ul, li { list-style:none; }
    fieldset, img { border:none; }
    em, strong, cite, th { font-style:normal; font-weight:normal; }
    /* Focus_change style */
    #focus_change { position:relative; width:1050px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
     #focus_change_list { position:absolute; width:1800px; height:295px; }
      #focus_change_list li { float:left; }
      #focus_change_list li img { width:1050px; height:295px; }
     .focus_change_opacity { position:absolute; width:1050px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
     #focus_change_btn { position:absolute; width:1050px; height:65px; top:225px; left:0; }
      #focus_change_btn ul { padding-left:5px; }
      #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
      #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
      #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}
      #focus_change_btn .current img { border-color:#EEE; }
    </style>
    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    function moveElement(elementID,final_x,final_y,interval) {
      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 classNormal(){
     var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
     for(var i=0; i<focusBtnList.length; i++) {
      focusBtnList[i].className='';
     }
    }
    function focusChange() {
     var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
      focusBtnList[0].onmouseover = function() {
       moveElement('focus_change_list',0,0,5);
       classNormal()
       focusBtnList[0].className='current'
      }
      focusBtnList[1].onmouseover = function() {
       moveElement('focus_change_list',-1050,0,5);
       classNormal()
       focusBtnList[1].className='current'
      }
      focusBtnList[2].onmouseover = function() {
       moveElement('focus_change_list',-2100,0,5);
       classNormal()
       focusBtnList[2].className='current'
      }
      focusBtnList[3].onmouseover = function() {
       moveElement('focus_change_list',-3150,0,5);
       classNormal()
       focusBtnList[3].className='current'
      }
    }
    setInterval('autoFocusChange()', 5000);
    var atuokey = false;
    function autoFocusChange() {
     $('focus_change').onmouseover = function(){atuokey = true}
     $('focus_change').onmouseout = function(){atuokey = false}
     if(atuokey) return;
     var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
     for(var i=0; i<focusBtnList.length; i++) {
      if (focusBtnList[i].className == 'current') {
       var currentNum = i;
      }
     }
     if (currentNum==0 ){
      moveElement('focus_change_list',-1050,0,5);
      classNormal()
      focusBtnList[1].className='current'
     }
     if (currentNum==1 ){
      moveElement('focus_change_list',-2100,0,5);
      classNormal()
      focusBtnList[2].className='current'
     }
     if (currentNum==2 ){
      moveElement('focus_change_list',-3150,0,5);
      classNormal()
      focusBtnList[3].className='current'
     } 
     if (currentNum==3 ){
      moveElement('focus_change_list',0,0,5);
      classNormal()
      focusBtnList[0].className='current'
     }
    }
    window.onload=function(){
     focusChange();
    }
    </script>
    </head>
    <body>
    <div id="focus_change">
     <div id="focus_change_list" style="top:0; left:0;">
      <ul>
      <li><img src="1.jpg" alt="" /></li>
      <li><img src="2.jpg" alt="" /></li>
      <li><img src="3.jpg" alt="" /></li>
      <li><img src="4.jpg" alt="" /></li>
      </ul>
     </div>
     <div class="focus_change_opacity"></div>
     <div id="focus_change_btn">
      <ul>
      <li class="current"><a href="#"><img src="1.jpg" alt="" /></a></li>
      <li><a href="#"><img src="2.jpg" alt="" /></a></li>
      <li><a href="#"><img src="3.jpg" alt="" /></a></li>
      <li><a href="#"><img src="4.jpg" alt="" /></a></li>
      </ul>
     </div>
    </div><!--focus_change end-->
    <div style="height:20px; background:#EEE;"></div>
    </body>
    </html>
    我改成了1050 可是第2张图片就显示不出了哪里错误了
      

  5.   


    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>图片转换 </title> 
    <style type="text/css"> 
    /* Reset style */ 
    * { margin:0; padding:0; word-break:break-all; } 
    body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } 
    h1, h2, h3, h4, h5, h6 { font-size:1em; } 
    a { color:#039; text-decoration:none; } 
    a:hover { text-decoration:underline; } 
    ul, li { list-style:none; } 
    fieldset, img { border:none; } 
    em, strong, cite, th { font-style:normal; font-weight:normal; } 
    /* Focus_change style */ 
    #focus_change { position:relative; width:600px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } 
    #focus_change_list { position:absolute; width:1800px; height:295px; } 
      #focus_change_list li { float:left; } 
      #focus_change_list li img { width:600px; height:295px; } 
    .focus_change_opacity { position:absolute; width:600px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } 
    #focus_change_btn { position:absolute; width:600px; height:65px; top:225px; margin-left:65px; } 
      #focus_change_btn ul { padding-left:5px; } 
      #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } 
      #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; } 
      #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;} 
      #focus_change_btn .current img { border-color:#EEE; } 
    </style> 
    <script type="text/javascript"> 
    function $(id) { return document.getElementById(id); } 
    function moveElement(elementID,final_x,final_y,interval) { 
      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 classNormal(){ 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      focusBtnList[i].className=''; 
    } 
    } 
    function focusChange() { 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
      focusBtnList[0].onmouseover = function() { 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
      } 
      focusBtnList[1].onmouseover = function() { 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
      } 
      focusBtnList[2].onmouseover = function() { 
      moveElement('focus_change_list',-1000,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
      } 
      focusBtnList[3].onmouseover = function() { 
      moveElement('focus_change_list',-1500,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
      } 
    } 
    setInterval('autoFocusChange()', 5000); 
    var atuokey = false; 
    function autoFocusChange() { 
    $('focus_change').onmouseover = function(){atuokey = true} 
    $('focus_change').onmouseout = function(){atuokey = false} 
    if(atuokey) return; 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      if (focusBtnList[i].className == 'current') { 
      var currentNum = i; 
      } 
    } 
    if (currentNum==0 ){ 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
    } 
    if (currentNum==1 ){ 
      moveElement('focus_change_list',-1000,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
    } 
    if (currentNum==2 ){ 
      moveElement('focus_change_list',-1500,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
    } 
    if (currentNum==3 ){ 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
    } 
    } 
    window.onload=function(){ 
    focusChange(); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="focus_change"> 
    <div id="focus_change_list" style="top:0; left:0;"> 
      <ul> 
      <li> <img src="1.jpg" alt="" /> </li> 
      <li> <img src="2.jpg" alt="" /> </li> 
      <li> <img src="3.jpg" alt="" /> </li> 
      <li> <img src="4.jpg" alt="" /> </li> 
      </ul> 
    </div> 
    <div class="focus_change_opacity"> </div> 
    <div id="focus_change_btn"> 
      <ul> 
      <li class="current"> <a href="#"> <img src="1.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="2.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="3.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="4.jpg" alt="" /> </a> </li> 
      </ul>
    </div> 
    </div> <!--focus_change end--> 
    <div style="height:20px; background:#EEE;"> </div> 
    </body> 
    </html> 
      

  6.   

    上面搞错了：
    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>图片转换 </title> 
    <style type="text/css"> 
    /* Reset style */ 
    * { margin:0; padding:0; word-break:break-all; } 
    body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } 
    h1, h2, h3, h4, h5, h6 { font-size:1em; } 
    a { color:#039; text-decoration:none; } 
    a:hover { text-decoration:underline; } 
    ul, li { list-style:none; } 
    fieldset, img { border:none; } 
    em, strong, cite, th { font-style:normal; font-weight:normal; } 
    /* Focus_change style */ 
    #focus_change { position:relative; width:600px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } 
    #focus_change_list { position:absolute; width:1800px; height:295px; } 
      #focus_change_list li { float:left; } 
      #focus_change_list li img { width:600px; height:295px; } 
    .focus_change_opacity { position:absolute; width:600px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } 
    #focus_change_btn { position:absolute; width:600px; height:65px; top:225px; margin-left:65px; } 
      #focus_change_btn ul { padding-left:5px; } 
      #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } 
      #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; } 
      #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;} 
      #focus_change_btn .current img { border-color:#EEE; } 
    </style> 
    <script type="text/javascript"> 
    function $(id) { return document.getElementById(id); } 
    function moveElement(elementID,final_x,final_y,interval) { 
      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 classNormal(){ 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      focusBtnList[i].className=''; 
    } 
    } 
    function focusChange() { 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
      focusBtnList[0].onmouseover = function() { 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
      } 
      focusBtnList[1].onmouseover = function() { 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
      } 
      focusBtnList[2].onmouseover = function() { 
      moveElement('focus_change_list',-1200,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
      } 
      focusBtnList[3].onmouseover = function() { 
      moveElement('focus_change_list',-1800,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
      } 
    } 
    setInterval('autoFocusChange()', 5000); 
    var atuokey = false; 
    function autoFocusChange() { 
    $('focus_change').onmouseover = function(){atuokey = true} 
    $('focus_change').onmouseout = function(){atuokey = false} 
    if(atuokey) return; 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      if (focusBtnList[i].className == 'current') { 
      var currentNum = i; 
      } 
    } 
    if (currentNum==0 ){ 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
    } 
    if (currentNum==1 ){ 
      moveElement('focus_change_list',-1200,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
    } 
    if (currentNum==2 ){ 
      moveElement('focus_change_list',-1800,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
    } 
    if (currentNum==3 ){ 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
    } 
    } 
    window.onload=function(){ 
    focusChange(); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="focus_change"> 
    <div id="focus_change_list" style="top:0; left:0;"> 
      <ul> 
      <li> <img src="1.jpg" alt="" /> </li> 
      <li> <img src="2.jpg" alt="" /> </li> 
      <li> <img src="3.jpg" alt="" /> </li> 
      <li> <img src="4.jpg" alt="" /> </li> 
      </ul> 
    </div> 
    <div class="focus_change_opacity"> </div> 
    <div id="focus_change_btn"> 
      <ul> 
      <li class="current"> <a href="#"> <img src="1.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="2.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="3.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="4.jpg" alt="" /> </a> </li> 
      </ul>
    </div> 
    </div> <!--focus_change end--> 
    <div style="height:20px; background:#EEE;"> </div> 
    </body> 
    </html> 
      

  7.   


    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>图片转换 </title> 
    <style type="text/css"> 
    /* Reset style */ 
    * { margin:0; padding:0; word-break:break-all; } 
    body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } 
    h1, h2, h3, h4, h5, h6 { font-size:1em; } 
    a { color:#039; text-decoration:none; } 
    a:hover { text-decoration:underline; } 
    ul, li { list-style:none; } 
    fieldset, img { border:none; } 
    em, strong, cite, th { font-style:normal; font-weight:normal; } 
    /* Focus_change style */ 
    #focus_change { position:relative; width:600px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } 
    #focus_change_list { position:absolute; width:1800px; height:295px; } 
    #focus_change_list ul{width:3000px; overflow:hidden; }
      #focus_change_list li { float:left; } 
      #focus_change_list li img { width:600px; height:295px; } 
    .focus_change_opacity { position:absolute; width:600px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } 
    #focus_change_btn { position:absolute; width:600px; height:65px; top:225px; left:0; } 
      #focus_change_btn ul { padding-left:65px; } 
      #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } 
      #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; } 
      #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;} 
      #focus_change_btn .current img { border-color:#EEE; } 
    </style> 
    <script type="text/javascript"> 
    function $(id) { return document.getElementById(id); } 
    function moveElement(elementID,final_x,final_y,interval) { 
      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 classNormal(){ 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      focusBtnList[i].className=''; 
    } 
    } 
    function focusChange() { 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
      focusBtnList[0].onmouseover = function() { 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
      } 
      focusBtnList[1].onmouseover = function() { 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
      } 
      focusBtnList[2].onmouseover = function() { 
      moveElement('focus_change_list',-1200,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
      } 
      focusBtnList[3].onmouseover = function() { 
      moveElement('focus_change_list',-1800,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
      } 
    } 
    setInterval('autoFocusChange()', 5000); 
    var atuokey = false; 
    function autoFocusChange() { 
    $('focus_change').onmouseover = function(){atuokey = true} 
    $('focus_change').onmouseout = function(){atuokey = false} 
    if(atuokey) return; 
    var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); 
    for(var i=0; i <focusBtnList.length; i++) { 
      if (focusBtnList[i].className == 'current') { 
      var currentNum = i; 
      } 
    } 
    if (currentNum==0 ){ 
      moveElement('focus_change_list',-600,0,5); 
      classNormal() 
      focusBtnList[1].className='current' 
    } 
    if (currentNum==1 ){ 
      moveElement('focus_change_list',-1200,0,5); 
      classNormal() 
      focusBtnList[2].className='current' 
    } 
    if (currentNum==2 ){ 
      moveElement('focus_change_list',-1800,0,5); 
      classNormal() 
      focusBtnList[3].className='current' 
    } 
    if (currentNum==3 ){ 
      moveElement('focus_change_list',0,0,5); 
      classNormal() 
      focusBtnList[0].className='current' 
    } 
    } 
    window.onload=function(){ 
    focusChange(); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="focus_change"> 
    <div id="focus_change_list" style="top:0; left:0;"> 
      <ul> 
      <li> <img src="1.jpg" alt="" /> </li> 
      <li> <img src="2.jpg" alt="" /> </li> 
      <li> <img src="3.jpg" alt="" /> </li> 
      <li> <img src="4.jpg" alt="" /> </li> 
      </ul> 
    </div> 
    <div class="focus_change_opacity"> </div> 
    <div id="focus_change_btn"> 
      <ul> 
      <li class="current"> <a href="#"> <img src="1.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="2.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="3.jpg" alt="" /> </a> </li> 
      <li> <a href="#"> <img src="4.jpg" alt="" /> </a> </li> 
      </ul> 
    </div> 
    </div> <!--focus_change end--> 
    <div style="height:20px; background:#EEE;"> </div> 
    </body> 
    </html>