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>

 

你可能感兴趣的:(jquery)