谁能把我这个滚动调一下啊?

我是想不管多少个li的情况下都正常滚动,现在第二行的都跑到下面去了..
在线求救!
<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title> <style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none;}
#scrolls{border:1px solid blue;width:550px;height:100px;margin:55px auto;overflow:hidden;overflow-x:auto}
#show li,#show1 li{width:100px;height:100px;background:orange;margin-left:10px;float:left;}
#show,#show1{float:left;}
#wrap{width:200%;float:left;}
</style> </head> <body>
        <div id="scrolls">
<div id="wrap">
<div id="show">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<div style="clear:both"></div>
</ul>
</div> <div id="show1">
</div>
   </div>
<script type="text/javascript">
 var $ = function (id) {return document.getElementById(id)};
  
 var scrolls = $("scrolls");
  
 var show = $("show");  var show1 = $("show1");
 var wrap = $("wrap");

 show1.innerHTML = show.innerHTML;

 function autoScroll(){
var list = show.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
if(list.length-1 == i){
scrolls.scrollLeft++;
document.title =  wrap.offsetWidth + ":" +scrolls.scrollLeft;
if(scrolls.scrollLeft == wrap.offsetWidth-scrolls.scrollLeft){
scrolls.scrollLeft =0;
}
}
}
setTimeout("autoScroll()",10)
 }
 autoScroll()
</script>
</div>
 </body>
</html>

解决方案 »

  1.   

    12个可以这样 无限多估计是不行的<!DOCTYPE HTML>
    <html>
     <head>
      <title> New Document </title>    <style type="text/css">
            *{margin:0;padding:0;}
            ul{list-style:none outside none;}
            #scrolls{border:1px solid blue;width:670px;height:100px;margin:55px auto;overflow-x:scroll;overflow-y:hidden}
            #show li,#show1 li{width:100px;height:100px;background:orange;margin-left:10px;float:left;}
            #show,#show1{float:left;}
            #wrap{width:200%;float:left;}
        </style> </head> <body>
            <div id="scrolls">
                <div id="wrap">
                        <div id="show">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                                <li>8</li>
                                <li>9</li>
                                <li>10</li>
                                <li>11</li>
                                <li>12</li>
                                <div style="clear:both"></div>
                            </ul>
                        </div>                    <div id="show1">
                        </div>
               </div>
                <script type="text/javascript">
                     var $ = function (id) {return document.getElementById(id)};
                      
                     var scrolls = $("scrolls");
                      
                     var show = $("show");                 var show1 = $("show1");
                     var wrap = $("wrap");
                    
                     //show1.innerHTML = show.innerHTML;
                    
                     function autoScroll(){
                        var list = show.getElementsByTagName("li");
                        for(var i=0; i<list.length; i++){
                                if(list.length-1 == i){
                                    scrolls.scrollLeft++;
                                    document.title =  wrap.offsetWidth + ":" +scrolls.scrollLeft;
                                    if(scrolls.scrollLeft == wrap.offsetWidth-scrolls.scrollLeft){
                                        scrolls.scrollLeft =0;
                                    }
                                }
                        }
                        setTimeout("autoScroll()",10)
                     }
                     autoScroll()
                </script>
            </div>
     </body>
    </html>
      

  2.   


    <!DOCTYPE HTML>
    <html>
     <head>
      <title> New Document </title>    <style type="text/css">
            *{margin:0;padding:0;}
            ul{list-style:none outside none;}
            #scrolls{border:0px solid blue;width:550px;height:100px;margin:55px auto;overflow:hidden;}
            #show li,#show1 li{width:100px;height:100px;background:orange;margin-left:10px;float:left;}
            #show,#show1{float:left;}
            #wrap{float:left;}
        </style> </head> <body>
            <div id="scrolls">
                <div id="wrap">
                        <div id="show">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                                <li>8</li>
                                <li>9</li>
                                <li>10</li>
                                <li>11</li>
                                <li>12</li>
                                <li>13</li>
                                <li>14</li>
                            </ul>
                        </div>
               </div>
                <script type="text/javascript">
                     var $ = function (id) {return document.getElementById(id)};
                      
                     var scrolls = $("scrolls");
                      
                     var show = $("show");                 var wrap = $("wrap");
                     var list = show.getElementsByTagName("li");
                     wrap.style.width=list.length*(100+10)+"px";
                    
                     function autoScroll(){
                        
                        for(var i=0; i<list.length; i++){
                                if(list.length-1 == i){
                                    scrolls.scrollLeft++;
                                    document.title =  wrap.offsetWidth + ":" +scrolls.scrollLeft+":"+scrolls.offsetWidth ;
                                    if(wrap.offsetWidth-scrolls.scrollLeft==scrolls.offsetWidth){
                                        scrolls.scrollLeft =0;
                                    }
                                }
                        }
                        setTimeout("autoScroll()",10)
                     }
                     autoScroll()
                </script>
            </div>
     </body>
    </html>