jQuery左右图文滚动

时间：2015-01-26 19:00:54 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：

这个是图文的左右滚动，一般是一版几个图片，图片下面配有文字。

现在实现的有：文档首次载入后，会自动切换。如果点击了左右按钮或者是下面的索引小圆，就会关闭定时器。

需要解决的问题是，如果不对轮播图进行操作后3s，它又会自动开启定时器进行切换了。

jQuery实现的要添加一个jQuery库文件。可以是本地的，也可是在线的。

好了，话不多说，上代码哈。

html:

 1 <div class="container">
 2 <span id="prev" class="prev btn">&lt;</span>
 3 <span id="next" class="next btn">&gt;</span>
 4 <div class="img_container">
 5  <div class="imgbox" style="left:0">
 6   <ul>
 7    <li style="background:red;">1</li>
 8    <li style="background:blue;">2</li>
 9    <li style="background:pink;">3</li>
10    <li>4</li>
11    <li style="background:#ccc;">5</li>
12    <li style="background:010101;">6</li>
13    <li style="background:green;">7</li>
14    <li style="background:maroon;">8</li>
15    <li style="background:#6A3939;">9</li>
16    <li style="background:#0D5224;">10</li>
17    <li style="background:#0D156F;">11</li>
18    <li style="background:#861271;">12</li>
19    <li style="background:#3E0858;">13</li>
20    <li style="background:#C42C64;">14</li>
21    <li style="background:#403E05;">15</li>
22   </ul>
23  </div>
24  <div class="circle">
25   <span class="current">1</span><span>2</span><span>3</span><span>4</span>
26  </div>
27 </div>
28 </div>

css:

 1 <style>
 2 *{
 3   margin:0;
 4   padding:0;
 5 }
 6 .container{
 7   width:700px;
 8   height:300px;
 9   border:1px solid #000;
10   margin:50px auto;    
11   position:relative;
12 }
13 .container span.btn{
14   display:block;
15   width:30px;
16   height:100px;
17   line-height:100px;
18   text-align:center;
19   font-size:40px;
20   background:rgba(0,0,0,.3);
21   position:absolute;
22   top:100px;
23   cursor:pointer;
24   display:none;    
25 }
26 .container:hover span.btn{
27   display:block;    
28 }
29 .container span.btn:hover{
30   background:rgba(0,0,0,.6);
31 }
32 .container span.btn.prev{
33   left:0;    
34 }
35 .container span.btn.next{
36   right:0;    
37 }
38 /**/
39 .img_container{
40   width:600px;
41   height:240px;
42   border:1px solid red;
43   margin:30px auto;    
44   overflow:hidden;
45   position:relative;
46 }
47 .img_container .imgbox{
48   position:absolute;
49   left:0;
50   top:0;
51   width:2400px;    
52 }
53 .img_container .imgbox li{
54   float:left;
55   list-style:none;
56   width:130px;
57   height:200px;
58   background:#f60;
59   margin:10px;    
60   font-size:30px;
61   color:white;
62   line-height:200px;
63   text-align:center;
64   margin-top:20px;
65 }
66 
67 /*焦点图下面的显示索引的小圆环*/
68 .img_container .circle{
69   width:64px;
70   height:12px;
71   position:absolute;
72   bottom:4px;
73   left:268px;    
74 }
75 .img_container .circle span{
76   display:block;
77   float:left;
78   width:10px;    
79   height:10px;
80   background:#9DA5A5;
81   font-size:12px;
82   margin-right:4px;
83   text-indent:-9999px;
84   border-radius:50%;
85   border:1px solid #000;
86   cursor:pointer;
87 }
88 .img_container .circle span.current{
89   background:#FF4500;    
90 }
91 </style>

js:

  1 <script>
  2 $(function(){
  3   var page = 1;  //定义为当前第一页
  4   var i = 4;  //每版放四个图片
  5   //向后按钮
  6   $(‘span.next‘).click(function(){ //绑定click事件
  7       clearInterval(timer);
  8      var container = $(this).parents(‘div.container‘);  //根据当前点击元素获取到祖先元素（最外层的idv） container 
  9      var imgBox = container.find(‘div.imgbox‘);  //获取装图片的盒子
 10      var imgContainer = container.find(‘div.img_container‘); //获取展示图片的显示屏
 11      var iWidth = imgContainer.width(); //获取显示屏的宽度
 12      var len = container.find(‘li‘).length;  //获取列表的个数
 13      var pageCount = Math.ceil(len/i);   // 分为多少版，一定要注意细节啊，这里的是Math.ceil(),向上取整（只要不是整数，就往大的方向取最小的整数）
 14      if(!imgBox.is(":animated")){    //判断装图片的盒子是否正在处于动画
 15         if(page == pageCount){  //已经到最后一个版面了，如果再向后，必须跳转到第一个版面
 16            imgBox.animate({left:‘0px‘},‘slow‘); //通过改变left值，跳转到第一个版面
 17            page = 1;    
 18         }else{
 19            imgBox.animate({left:‘-=‘+iWidth},‘slow‘);
 20            page++;    
 21         }     
 22      } 
 23      container.find(‘.circle span‘).eq((page-1)).addClass(‘current‘).siblings().removeClass(‘current‘); 
 24   });
 25   //向前按钮
 26   $(‘span.prev‘).click(function(){
 27       clearInterval(timer);
 28      var container = $(this).parents(‘div.container‘);
 29      var imgBox = container.find(‘div.imgbox‘);
 30      var imgContainer = container.find(‘div.img_container‘);
 31      var iWidth = imgContainer.width();
 32      var len = container.find(‘li‘).length; 
 33      var pageCount = Math.ceil(len/i);
 34      if(!imgBox.is(":animated")){
 35        if(page == 1){
 36           imgBox.animate({left:‘-=‘+iWidth*(pageCount-1)},‘slow‘);
 37           page = pageCount;   
 38        }else{
 39           imgBox.animate({left:‘+=‘+iWidth},‘slow‘);
 40           page--;   
 41        }     
 42      } 
 43      container.find(‘.circle span‘).eq((page-1)).addClass(‘current‘).siblings().removeClass(‘current‘);
 44   });
 45   
 46   //下面的圆环的鼠标经过事件
 47   $(‘.circle span‘).click(function(){
 48      var count = $(‘.circle span‘).index(this); 
 49      var container = $(this).parents(‘div.container‘);
 50      var imgBox = container.find(‘div.imgbox‘);
 51      var imgContainer = container.find(‘div.img_container‘);
 52      var iWidth = imgContainer.width();
 53      var len = container.find(‘li‘).length; 
 54      var pageCount = Math.ceil(len/i);
 55      if(!imgBox.is(‘:animated‘)){
 56         imgBox.animate({left:-iWidth*count},500);     
 57      }
 58      $(this).addClass(‘current‘).siblings().removeClass(‘current‘);
 59   });
 60 });
 61 
 62 window.onload = startMove;
 63 var timer = null;
 64 function startMove(){
 65      var container = $(‘div.container‘);
 66      var imgBox = container.find(‘div.imgbox‘);
 67      var imgContainer = container.find(‘div.img_container‘);
 68      var iWidth = imgContainer.width();
 69      var pPage = 1;
 70      /*var offLeft = imgContainer.offset().left;
 71      var offLeftImg = Math.round(1800-offLeft);*/
 72 
 73      timer = setInterval(function(){
 74      
 75           /*if(imgBox.css(‘left‘) == -1800+‘px‘){
 76                 imgBox.animate({left:‘0px‘});
 77               }else{imgBox.animate({left:‘-=‘+iWidth});}*/  //这中方法不错的哦
 78     /*if(imgBox.offset().left <= -1200){
 79                 
 80                 imgBox.animate({left:‘0px‘});
 81             
 82     }
 83               else{imgBox.animate({left:‘-=‘+iWidth});} */  //这种方法不可取
 84               if(imgBox.css(‘left‘) == -1800+‘px‘){
 85                 imgBox.animate({left:‘0px‘});
 86                 pPage = 1;
 87               }else{
 88                 imgBox.animate({left:‘-=‘+iWidth});
 89                 if(pPage == 4){
 90                   pPage = 1;    
 91                 }else{
 92                   pPage++;
 93                 }
 94               }
 95     /*var imgIndex = Math.abs(parseInt(imgBox.css(‘left‘)))/iWidth;
 96     $(‘.circle span‘).eq((imgIndex+1)).addClass(‘current‘).siblings().removeClass(‘current‘);*/
 97     $(‘.circle span‘).eq(pPage-1).addClass(‘current‘).siblings().removeClass(‘current‘);
 98      
 99 },3600);    
100 }
101 </script>