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>