JQuery左右按钮控制图片 文字向上滚动自定义插件

  1. 云栖社区>
  2. 博客>
  3. 正文

JQuery左右按钮控制图片 文字向上滚动自定义插件

余二五 2017-11-15 21:38:00 浏览939
展开阅读全文

今天给大家分享的是 Jquery插件 用Jquery写个插件  此插件包含几部分功能:

1 文字向上滚动 或者向下滚动

2 图片默认情况下向左滚动或者向右滚动 向上及向下滚动 滚动一个或者几个 都是自定义 就看本人而言 你想要一次性滚动多少个 就滚动多少个 并且带有向左按钮 向右按钮 当点击向左按钮时候 会向左滚动 点击向右按钮时候 图片向右滚动

3 当然此插件 希望能在可视区范围内 的图片数量<总的图片数量(可视区+隐藏的) 如果是可视区是三张图片的话 那么我让他滚动三张的话 那么有一点点不稳定 一点点不美观!但是不管怎么样 效果还是非常棒的!

这个Jquery组件是我今年5月份左右仿照我的一个朋友的js写过来的!这个组件非常的好 可以自定义 所以也拿来给各位朋友分享下!希望大家能够共同进步!能兼容各个主流游览器  包括IE6! 所以有碰到这样的效果时候 很急的话 直接可以拿来用 当然我个人更建议大家看看源代码 源代码大部分我都小小注释了下!页面传参数的时候 我是用了kk 这样的 本来一般情况下用$符合 但是我是为了以后做淘宝页面时候 碰到类似下效果 直接拿来用 但是$符合会i和淘宝的KISSY框架发生冲突,所以用了其他的符合代替,在接下来时间内 我可能会多翻译下Jquery其他的效果 或者组件  恩 不多说啊!现在来看看代码吧!恩 还是要提前说一下 如果要引用我这个js的话 那么一定要和我的结构一样 否则的话 js没有用的!

我的结构如:

 


  1. 完整的html代码结构: 
  2.  *<div id="example"> 
  3.  *    <div class="scroll"> 
  4.  *         <ul> 
  5.  *           <li></li> 
  6.  *           <li></li> 
  7.  *           <li></li> 
  8.  *           <li></li> 
  9.  *         </ul> 
  10.  *    </div> 
  11.  *    <span class="prev">前一个</span> 
  12.  *    <span class="next">下一个</span> 
  13.  *</div> 

这上面的是基本的HTML结构 一定要按照我这个结构来写!页面上调用方式如下:

 


  1. $("#demo3").XYMarquee({ 
  2.             _direction:'left', 
  3.             _btnNext : "next", 
  4.             _btnPrev : "prev", 
  5.             _auto : false, 
  6.             _item:"3" 
  7.         }); 

调用方式 如上所述:下面介绍一些基本的参数的含义:

 


  1. * _direction : left || top ,设置滚动方向 (向左或者向上)默认为向左滚动 
  2. * _btnNext : 下翻页的ID名称 
  3. * _btnPrev : 上翻页的ID名称 
  4. * _auto : 布尔值(true为自动滚动,false为手动滚动,默认为true); 
  5. * _item : 设置每次滚动元素的个数(默认滚动所有可见部分) 
  6. * _speed : 设置每次滚动动画执行时间(单位为毫秒,默认为1000); 
  7. * _time : 设置每次动画执行的间隔时间(单位为毫秒 默认为3000); 

下面是我这个测试的页面HTML/css

 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style> 
  7. * { 
  8.     margin:0; 
  9.     padding:0; 
  10. body { 
  11.     background:#e3e3e3; 
  12.     height:100%; 
  13.     font:normal normal 12px/24px "Microsoft yahei", Arial; 
  14.     padding-bottom:30px; 
  15. li{list-style:none;} 
  16. h3{color:#333;font-size:14px;width:330px;margin:30px auto 0;} 
  17. img{display:block;} 
  18. #title{margin:20px 0; text-align:center;} 
  19. #wrap {position:relative;width:800px;height:550px;margin:0 auto;background:#f8f8f8;border:1px solid #a3a3a3;border-radius:5px;-moz-border-radius:5px;} 
  20. .ws{margin-top:30px;text-align:left;} 
  21.  
  22. .box{width:400px;margin:0 auto;margin-top:10px;} 
  23. .boxs{width:110px;margin:0;margin-top:30px;} 
  24. .box span.title{float:left;height:30px;line-height:28px;border:1px solid #5AABCF;border-right:none;text-indent:5px;margin-left:29px;background:#73C5E5;color:#fff;} 
  25.  
  26. /*文字*/ 
  27. .scroll1{width:297px;height:30px;margin:0 auto;border:1px solid #5AABCF;overflow:hidden;} 
  28. .scroll1 li{width:230px;height:30px;line-height:30px;text-indent:5px;} 
  29.  
  30. .scroll2 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;} 
  31. .scroll2 li{float:left;width:100px;height:100px;padding:5px;} 
  32.  
  33. .scroll3 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;} 
  34. .scroll3 li{float:left;width:100px;height:100px;padding:5px;} 
  35.  
  36. .scroll4 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;} 
  37. .scroll4 li{width:100px;height:100px;padding:5px;} 
  38. .absl{position:absolute;left:30px; top:0;} 
  39.  
  40. .scroll5 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;} 
  41. .scroll5 li{width:100px;height:100px;padding:5px;} 
  42. .absr{position:absolute;right:40px; top:0;} 
  43.  
  44. #prev, 
  45. #next{float:left;margin-top:5px;margin-left:5px;padding:2px 5px;background:#73C5E5;color:#fff;cursor: pointer;} 
  46.  
  47. .download{width:300px;margin:0 auto;text-align:center;} 
  48. .cl{clear:both;} 
  49. .fl{float:left;} 
  50. .fr{float:right;} 
  51. .hide{display:none;} 
  52. </style> 
  53. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
  54. <script type="text/javascript" src="jquery.XYMarquee.js"></script> 
  55. </head> 
  56.  
  57. <body> 
  58.     <div id="wrap"> 
  59.     <!-- 纯文字公告 --> 
  60.     <div class="ws"> 
  61.         <h3>文字自动滚动(向上)</h3> 
  62.         <div class="box" id='demo1'> 
  63.             <span class="title">尘世:</span> 
  64.             <div class='fl scroll1'> 
  65.                 <ul> 
  66.                    <li>欢迎来到博主的空间;</li> 
  67.                    <li>欢迎来到博主的空间;</li> 
  68.                    <li>欢迎来到博主的空间;</li> 
  69.                    <li>欢迎来到博主的空间;</li> 
  70.                    <li>欢迎来到博主的空间;</li> 
  71.                    <li>欢迎来到博主的空间;</li> 
  72.                    <li>欢迎来到博主的空间;</li> 
  73.                    <li>欢迎来到博主的空间;</li> 
  74.                    <li>欢迎来到博主的空间;</li> 
  75.                    <li>欢迎来到博主的空间;</li> 
  76.                    <li>欢迎来到博主的空间;</li> 
  77.                    <li>欢迎来到博主的空间;</li> 
  78.                 </ul> 
  79.             </div> 
  80.             <div class="cl"></div> 
  81.         </div> 
  82.     </div> 
  83.     <div class="ws"> 
  84.         <h3>图片自动滚动(向左)</h3> 
  85.         <div class="box" id='demo2'> 
  86.             <div class='scroll2'> 
  87.                  <ul> 
  88.                    <li><img src="images/1-1.jpg" alt="" /></li> 
  89.                    <li><img src="images/1-2.jpg" alt="" /></li> 
  90.                    <li><img src="images/1-3.jpg" alt="" /></li> 
  91.                    <li><img src="images/1-4.jpg" alt="" /></li> 
  92.                    <li><img src="images/1-5.jpg" alt="" /></li> 
  93.                    <li><img src="images/1-6.jpg" alt="" /></li> 
  94.                  </ul> 
  95.             </div> 
  96.         </div> 
  97.     </div> 
  98.     <div class="ws"> 
  99.         <h3>图片滚动(向左,带按钮控制,每次滚动个数3)</h3> 
  100.         <div class="box" id='demo3'> 
  101.             <div class='scroll3'> 
  102.                  <ul> 
  103.                    <li><img src="images/1-1.jpg" alt="" /></li> 
  104.                    <li><img src="images/1-2.jpg" alt="" /></li> 
  105.                    <li><img src="images/1-3.jpg" alt="" /></li> 
  106.                    <li><img src="images/1-4.jpg" alt="" /></li> 
  107.                    <li><img src="images/1-5.jpg" alt="" /></li> 
  108.                    <li><img src="images/1-6.jpg" alt="" /></li> 
  109.                  </ul> 
  110.             </div> 
  111.             <span id="prev" style="margin-left:30px;">前一个</span> 
  112.             <span id="next">下一个</span> 
  113.         </div> 
  114.     </div> 
  115.     <div class="boxs absl" id='demo4'> 
  116.         <div class='scroll4'> 
  117.              <ul> 
  118.                <li><img src="images/1-1.jpg" alt="" /></li> 
  119.                <li><img src="images/1-2.jpg" alt="" /></li> 
  120.                <li><img src="images/1-3.jpg" alt="" /></li> 
  121.                <li><img src="images/1-4.jpg" alt="" /></li> 
  122.                <li><img src="images/1-5.jpg" alt="" /></li> 
  123.                <li><img src="images/1-6.jpg" alt="" /></li> 
  124.              </ul> 
  125.         </div> 
  126.     </div> 
  127.     <div class="boxs absr" id='demo5'> 
  128.         <div class='scroll5'> 
  129.              <ul> 
  130.                <li><img src="images/1-1.jpg" alt="" /></li> 
  131.                <li><img src="images/1-2.jpg" alt="" /></li> 
  132.                <li><img src="images/1-3.jpg" alt="" /></li> 
  133.                <li><img src="images/1-4.jpg" alt="" /></li> 
  134.                <li><img src="images/1-5.jpg" alt="" /></li> 
  135.                <li><img src="images/1-6.jpg" alt="" /></li> 
  136.              </ul> 
  137.         </div> 
  138.         <span id="prev">前一个</span> 
  139.         <span id="next">下一个</span> 
  140.     </div> 
  141.     <div class="cl"></div> 
  142. </div> 
  143. <!-- 调用方法如下 --> 
  144. <script> 
  145.     $(function(){ 
  146.         $("#demo1").XYMarquee({ 
  147.             _direction:'up', 
  148.             _item:"1" 
  149.         }); 
  150.         $("#demo2").XYMarquee({ 
  151.             _direction:'left', 
  152.             _item:"1" 
  153.         }); 
  154.         $("#demo3").XYMarquee({ 
  155.             _direction:'left', 
  156.             _btnNext : "next", 
  157.             _btnPrev : "prev", 
  158.             _auto : false, 
  159.             _item:"3" 
  160.         }); 
  161.         $("#demo4").XYMarquee({ 
  162.             _direction:'up', 
  163.             _item:"1" 
  164.         }); 
  165.         $("#demo5").XYMarquee({ 
  166.             _direction:'up', 
  167.             _btnNext : "next", 
  168.             _btnPrev : "prev", 
  169.             _auto : false, 
  170.             _item:"3" 
  171.         }); 
  172.     });  
  173. </script> 
  174. </body> 
  175. </html> 

Jquery如下:

 



  1. // JavaScript Document 
  2. /* 
  3. × JQuery XYMarquee 插件 
  4. × email tugenhua@126.com 
  5. * date 2011 11 29 
  6. * @ example  
  7. * $("#example").XYMarquee({ 
  8.  *        next : "next", 
  9.  *        prev : "prev"                          
  10.  *  }) 
  11.   ********************************************************************** 
  12.  *jMarquee o参数可配置项: 
  13. * _direction : left || top ,设置滚动方向 (向左或者向上)默认为向左滚动 
  14. * _btnNext : 下翻页的ID名称 
  15. * _btnPrev : 上翻页的ID名称 
  16. * _auto : 布尔值(true为自动滚动,false为手动滚动,默认为true); 
  17. * _item : 设置每次滚动元素的个数(默认滚动所有可见部分) 
  18. * _speed : 设置每次滚动动画执行时间(单位为毫秒,默认为1000); 
  19. * _time : 设置每次动画执行的间隔时间(单位为毫秒 默认为3000); 
  20.  ********************************************************************** 
  21.  *完整的html代码结构: 
  22.  *<div id="example"> 
  23.  *    <div class="scroll"> 
  24.  *         <ul> 
  25.  *           <li></li> 
  26.  *           <li></li> 
  27.  *           <li></li> 
  28.  *           <li></li> 
  29.  *         </ul> 
  30.  *    </div> 
  31.  *    <span class="prev">前一个</span> 
  32.  *    <span class="next">下一个</span> 
  33.  *</div> 
  34.  ********************************************************************** 
  35.  * 一定要按照我这种结构的话来写代码 否则的话 js无效 
  36.  * 本来下面传参 一般情况下用$符合  但是为了我以后在淘宝页面引用js 所以我用了KK 目的是为了防止与淘宝框架KISSY 中的$冲突 
  37.  × 此组件 希望可视区的图片数量<总图片数量(可视区图片+隐藏的图片) 这样的效果很好 否则的话 滚动时会有一点点的不怎么美观  
  38. */ 
  39. ;(function(kk) { 
  40.     kk.fn.extend({ 
  41.         XYMarquee : function(o){ 
  42.             var defaults = { 
  43.                 _direction : "left"
  44.                 _btnNext : "prev"
  45.                 _btnPrev : "next"
  46.                 _auto : true
  47.                 _item : null
  48.                 _speed : "1000"
  49.                 _time : "3000"   
  50.             }; 
  51.             var obj = kk.extend(defaults,o); 
  52.             return this.each(function(){ 
  53.                 var timer; 
  54.                 var marquee = true,_self = kk(this),kkWrap = kk("div",_self),kkParent = kk("li",kkWrap).parent(); //获取当前的函数 函数中的最外层div ul 
  55.                 var count = obj._direction =="left" ? Math.floor(kkWrap.width()/ kk("li", kkWrap).outerWidth()):Math.floor(kkWrap.height() / kk("li", kkWrap).outerHeight()); //定义一个变量count 如果向左的话 那么用  最外层的div的宽度/li的最外层宽度  高度同理 
  56.                 if(obj._item){count = obj._item;}  //count滚动数量 通过_item赋值 
  57.                 if(obj._direction =="left"){ 
  58.                     kkParent.css("width",kkWrap.width()*2 + "px");  //如果对象是向左移动的话 那么我让ul的宽度×2 
  59.                 }else
  60.                     kkParent.css("height",kkWrap.height()*2 + "px"); //如果对象是向上滚动的话 让ul的高度×2 目的是为了循环滚动 
  61.                 } 
  62.                 kkWrap.css("overflow","hidden");  //给最外层的div添加overflow:hidden; 
  63.                 var kkValue = obj._direction =="left" ? kk("li",kkWrap).outerWidth()*count : kk("li",kkWrap).outerHeight()*count; 
  64.                 // 定义一个变量 如果滚动是向左的话 那么滚动值 是li的宽度×要滚动多少个 同理 如果是向上的话 那么获取li最外层的高度×要滚动多少个 
  65.                 function scrollNext(){ 
  66.                     if(marquee){ 
  67.                         marquee = false//这是为了 当我鼠标点击向下按钮时候 让默认滚动停下来 做我点击向下按钮的触发函数 
  68.                         if(obj._direction == "left"){ 
  69.                             kkParent.animate({ 
  70.                                 marginLeft: -kkValue 
  71.                             },obj._speed,function(){ 
  72.                                 var kkTempWrap = kk("li",kkWrap).slice(0,count); //提取li的个数 
  73.                                 kkParent.append(kkTempWrap); //追加ul后面 
  74.                                 kkParent.css("marginLeft",0); //当父类ul滚动到0时候 也就是li最后一个时候 让marquee = true 那么他又执行上面的false 那么就向左循环滚动了 
  75.                                 marquee = true
  76.                             });  
  77.                         }else
  78.                             kkParent.animate({ 
  79.                                 marginTop : -kkValue     
  80.                             },obj._speed,function(){ 
  81.                                 var kkTempWrap = kk("li",kkWrap).slice(0,count); 
  82.                                 kkParent.append(kkTempWrap); 
  83.                                 kkParent.css("marginTop",0); 
  84.                                 marquee = true;  
  85.                             });  
  86.                         } 
  87.                              
  88.                     }    
  89.                 }; 
  90.                 <!-- 向下滚动结束 --> 
  91.                  
  92.                 function scrollPrev(){ 
  93.                     if(marquee){ 
  94.                         var kkTempWrap = kk("li",kkWrap).slice( - count);   //获取li向左滚动的总数量 
  95.                         marquee = false
  96.                         kkParent.prepend(kkTempWrap); 
  97.                         if(obj._direction =="left"){ 
  98.                             kkParent.css("marginLeft",-kkValue); 
  99.                             kkParent.animate({marginLeft : 0},obj._speed,function(){ 
  100.                                 marquee = true;  
  101.                             }); 
  102.                         }else
  103.                             kkParent.css("marginTop",-kkValue);  
  104.                             kkParent.animate({ 
  105.                                 marginTop : 0    
  106.                             },obj._speed,function(){ 
  107.                                 marquee = true;  
  108.                             }); 
  109.                         } 
  110.                     }    
  111.                 }; 
  112.                 <!-- 向上滚动结束 --> 
  113.                 function stopMarquee(){ 
  114.                     clearInterval(timer);    
  115.                 } 
  116.                 <!-- 停止滚动结束 --> 
  117.                 function autoPlay(){ 
  118.                     timer = setInterval(scrollNext,obj._time);   
  119.                 } 
  120.                 <!-- 开始滚动结束 --> 
  121.                 if(obj._auto){ 
  122.                     kkWrap.hover(function(){ 
  123.                         stopMarquee();   
  124.                     },function(){ 
  125.                         autoPlay();  
  126.                     }); 
  127.                     kk("#" + obj._btnPrev, _self).hover(function() { 
  128.                         stopMarquee(); 
  129.                     },function() { 
  130.                         autoPlay(); 
  131.                     }); 
  132.                     kk("#" + obj._btnNext, _self).hover(function() { 
  133.                         stopMarquee(); 
  134.                     },function() { 
  135.                         autoPlay(); 
  136.                     }); 
  137.                     autoPlay(); 
  138.                 } 
  139.                 kk("#" + obj._btnPrev, _self).click(scrollPrev); 
  140.                 kk("#" + obj._btnNext, _self).click(scrollNext);     
  141.             });  
  142.         }    
  143.     }); 
  144. })(jQuery); 

如上所示 jquery里面有相应的注释!下面有附件 可以下载附件看看效果都可以!我上面的HTML有页面上的所有效果!大家可以看看 !!










本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/729361,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论