jquery 实现横向滑动自动切换源码(同时显示多张图片)

html代码:

 1 <!doctype html>

 2 <html lang="en">

 3 <head>

 4  <meta charset="UTF-8" />

 5  <title>animate scroll</title>

 6  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

 7  <style type="text/css">

 8   body{background-color: #f3f3f3;}

 9   .center{margin: 0 auto;}

10   .inline-block{display: inline-block;}

11   #banner{width: 800px;height: 200px;margin-top: 40px;border: 1px solid #fff;overflow: hidden;}

12   #container{height: 100%;width: 300%;}

13   #banner img{width: 200px;height: 100%;display: block;float: left;}

14  </style>

15 

16 </head>

17 <body>

18  <div id="banner" class="center">

19   <div id="container">

20    <img src="images/1.jpg"/>

21    <img src="images/2.jpg"/>

22    <img src="images/3.jpg"/>

23    <img src="images/4.jpg"/>

24    <img src="images/5.jpg"/>

25    <img src="images/6.jpg"/>

26    <img src="images/1.jpg"/>

27    <img src="images/2.jpg"/>

28    <img src="images/3.jpg"/>

29    <img src="images/4.jpg"/>

30    <div class="clear"></div>

31   </div>

32  </div>

33 </body>

34 </html>

 

js代码:

 1  <script type="text/javascript">

 2   var i=1;

 3   $(function(){

 4    setInterval(autoScroll,2000);

 5   });

 6  

 7   function autoScroll(){

 8    $("#container").animate({

 9     "margin-left":"-"+200*i+"px"

10    },1000,isScroll);

11   }

12   function isScroll(){

13    var _marginLeft = $("#container").css("margin-left");

14    var _lenth = $("#container img").length-4;

15    if(_marginLeft=='-'+(200*_lenth)+'px'){

16     $("#container").css("margin-left","0");

17     i=1;

18    }else{

19     i++;

20    }

21   }

22  </script>

 

你可能感兴趣的:(jquery)