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>

 

posted @ 2015-04-14 14:14  Nancy_0324  阅读(625)  评论(0)  编辑  收藏  举报