js+jquery的左右翻滚代码（1）

 1 <!doctype HTML>
 2 
 3 <HEAD>
 4 <TITLE>
 5     
 6 </TITLE>
 7 </HEAD>
 8 <body>
 9 <style>
10 #box{
11     width: 300px;
12     height: 300px;
13     overflow: hidden;
14     position:relative;
15     
16 }
17 #alldiv{
18     width: 900px;
19     height: 300px;
20     background: red;
21     position: absolute;
22     left:0px;
23     top: 0px;
24 }
25 #alldiv div{
26     width: 300px; 
27     height: 300px;
28     float: left;
29     background: blue;
30     color:#fff;
31 
32 }
33 </style>
34 <div id="box">
35  <div id="alldiv">
36    <div id="div-1">
37        div-1
38    </div>
39    <div id="div-2">
40        div-2
41    </div>
42    <div id="div-3">
43        div-3
44    </div>
45  </div>
46 </div>
47 
48 <span id="count">1</span>
49 <input type="button" id="btn" value="滚动" onclick="scroll()"/>
50 
51 <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
52 <script>
53    var btn=document.getElementById('btn');
54    var box=document.getElementById('box');
55    var alldiv=document.getElementById('alldiv');
56    var childdiv=document.getElementById('alldiv').getElementsByTagName('div');
57    
58    function scroll(){
59             var bw=box.offsetWidth;
60             var aw=alldiv.offsetWidth;
61             var num=aw/childdiv[1].offsetWidth;
62          var count=document.getElementById('count').innerHTML;
63          document.getElementById('count').innerHTML++;
64               $('#alldiv').css({"left":"-"+bw*count+"px"});
65 
66               
67             
68            }
69   
70 </script>
71 </body>
if you don't try,you will never know!