这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜!

JQ插件代码

  1. (function($){
  2. $.fn.roll = function(options){
  3. if($(this).length == 0) return false;
  4. var opts = $.extend({},$.fn.roll.defaults,options);
  5.  
  6. function Rolling(o){
  7. this.oParent = o;
  8. this.imgList = o.find(opts['imgList']);
  9. this.rollEle = o.find(opts['rollEle']);
  10. this.rollEleParent = o.find(opts['rollEleParent']);
  11. this.bl = o.find(opts['btn-left']);
  12. this.br = o.find(opts['btn-right']);
  13. this.auto = opts['automatic'];
  14. this.speed = opts['speed'];
  15. this.num = opts['num'];
  16. this.stop = opts['stop'];
  17. this.onOff = true;
  18. this.leftValue = 0;
  19. this.len = 0;
  20. this.index = 0;
  21. this.timer = null;
  22. this.singleW = 0;
  23. this.preIndex = -1;
  24. this.nowIndex = 0;
  25.  
  26. }
  27.  
  28. Rolling.prototype = {
  29. init:function(){
  30. var _this = this;
  31. this.len = this.rollEle.length;
  32. this.singleWidth();
  33. this.rollEleParent.width(this.singleW*this.len);
  34. this.bl.on('click',function(){
  35. _this.stopRoll();
  36. _this.fnRoll(0);
  37. return false;
  38. });
  39. this.br.on('click',function(){
  40. _this.stopRoll();
  41. _this.fnRoll(1);
  42. return false;
  43. });
  44. if(this.auto){
  45. this.timer = setInterval(function(){
  46. _this.automatic();
  47. },this.speed[0]);
  48.  
  49. this.oParent.hover(function(){
  50. _this.stopRoll();
  51. },function(){
  52. _this.timer = setInterval(function(){
  53. _this.automatic();
  54. },_this.speed[0])
  55. })
  56. }
  57. },
  58. singleWidth:function(){
  59. this.singleW = this.rollEle.eq(0).outerWidth(true);
  60. },
  61.  
  62. fnRoll:function(dir){ //dir == 1,→→滚, dir==0,←←滚
  63. var _this = this;
  64. this.onOff = false;
  65. this.preIndex = this.index;
  66. var scrolling = dir ? {scrollLeft:_this.singleW*this.num + _this.singleW*_this.index}:{scrollLeft:_this.leftValue - _this.singleW*this.num}
  67.  
  68. this.imgList.animate(scrolling,_this.speed[1],function(){
  69. _this.onOff = true;
  70. if(dir){
  71. if(_this.index < _this.len){
  72. _this.index += _this.num;
  73. _this.nowIndex = _this.index;
  74. }else{
  75. _this.index = _this.len;
  76.  
  77. }
  78.  
  79. }else{
  80. if(_this.index > 0){
  81. _this.index -= _this.num;
  82. _this.nowIndex = _this.index
  83. }else{
  84. _this.index = 0;
  85.  
  86. }
  87. _this.nowIndex = _this.index;
  88. }
  89.  
  90. _this.leftValue = $(this).scrollLeft();
  91. if(this.nowIndex == 0){ //当前索引为0是,则应该向右滚动,重置preIndex值(当前为0)
  92. this.preIndex = -1;
  93. }
  94.  
  95. })
  96.  
  97. },
  98.  
  99. stopRoll:function(){
  100. clearInterval(this.timer)
  101. },
  102. automatic:function(){
  103. if(this.leftValue >= this.rollEleParent.width() - this.imgList.width() + parseFloat(this.rollEleParent.css('margin-left'))){
  104. //判断 滚动容器是否滚到头,若到头了,则往回滚
  105. this.fnRoll(0)
  106. }
  107.  
  108. if(this.preIndex < this.nowIndex){ //判断上一次与当前索引的关系,若大于,则是向有滚动,若小于或等于则向左滚动
  109. this.fnRoll(1)
  110. return;
  111. }
  112.  
  113. if(this.preIndex >= this.nowIndex ){
  114.  
  115. this.fnRoll(0)
  116. }
  117.  
  118. if(this.nowIndex == 0){ //当前索引为0是,则应该向右滚动,重置preIndex值(当前为0)
  119. this.preIndex = -1;
  120. }
  121.  
  122. }
  123.  
  124. }
  125.  
  126. return this.each(function(){
  127. var $this = $(this);
  128. var obj = new Rolling($this);
  129. obj.init();
  130. $.fn.roll.stop = function(){
  131. obj.stopRoll();
  132. } //曝露停止自动滚动方法,共外部条用
  133. $.fn.roll.auto = function(){
  134. obj.stopRoll();
  135. obj.timer = setInterval(function(){
  136. obj.automatic();
  137. },obj.speed[0]);
  138. } //曝露继续自动滚动方法,共外部条用
  139.  
  140. })
  141. };
  142.  
  143. $.fn.roll.defaults = {
  144. 'imgList' : '.sildeImgList', //滚动容器
  145. 'rollEle' : 'li', //滚动元素
  146. 'rollEleParent' : 'ul', //滚动元素父级
  147. 'btn-left': '.btn-left', //button←←
  148. 'btn-right': '.btn-right', //button→→
  149. 'automatic': false, //是否自动滚动
  150. 'speed' : [3000,300], //间隔,速度
  151. 'num' : 1, //一次滚动的数量
  152. };
  153.  
  154. })(jQuery);

html

  1. <div class="sildeImgBox">
  2. <span class="btn-left"></span>
  3. <div class="sildeImgList">
  4. <ul>
  5. <li><img src="data:images/mm1.jpg" alt=""></li>
  6. <li><img src="data:images/mm2.jpg" alt=""></li>
  7. <li><img src="data:images/mm3.jpg" alt=""></li>
  8. <li><img src="data:images/mm1.jpg" alt=""></li>
  9. <li><img src="data:images/mm2.jpg" alt=""></li>
  10. <li><img src="data:images/mm3.jpg" alt=""></li>
  11. <li><img src="data:images/mm1.jpg" alt=""></li>
  12. <li><img src="data:images/mm2.jpg" alt=""></li>
  13. </ul>
  14. </div>
  15. <span class="btn-right"></span>
  16. </div>

调用

  1. <script>
  2.  
  3. $(function(){
  4. $('.sildeImgBox').eq(0).roll({'automatic' : true})
  5. })
  6.  
  7. </script>

css

  1. .sildeImgBox { width: 940px; margin: 0 auto; height: 344px; }
  2. .sildeImgBox .btn-left { background-position: 0 0; left:; }
  3. .sildeImgBox .btn-right { background-position: 100% 0; right:; }
  4. .sildeImgBox .sildeImgList { width: 820px; height: 349px; overflow: hidden; }
  5. .sildeImgBox .sildeImgList ul { left:; right:; margin-left: -15px; width: 5000px; }
  6. .sildeImgBox .sildeImgList li { display: inline; float: left; width: 262px; height: 344px; margin-left: 15px; box-shadow: 2px 2px 5px rgba(4, 0, 0, 0.75); }
  7. .sildeImgBox .btn-left, .sildeImgBox .btn-right .sildeImgBox .sildeImgList ul { position: absolute; }
  8. .sildeImgBox .btn-left, .sildeImgBox .btn-right { display: block; }
  9. .sildeImgBox, .sildeImgBox .sildeImgList { position: relative; }

jq插件第二款来袭 图片滚动的更多相关文章

  1. jQuery插件实例三:图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...

  2. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  3. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  4. 介绍一款网站前台图片滚动插件之"switchable"

    一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...

  5. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  6. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  7. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  8. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  9. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

随机推荐

  1. (原)ubuntu上安装nvidia及torch的nccl

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5717234.html 参考网址: https://github.com/NVIDIA/nccl htt ...

  2. putty设置

    1- 输入要链接的主机地址 2- 设置connection-->SSH-->Tunnels 点击Add 3- 设置connection 修改为30 4- 点击open,出现ssh登陆,输入 ...

  3. PHP自动生成前端的表单框架

    <?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param str ...

  4. python运维开发(二十一)----文件上传和验证码+session

    内容目录: 文件上传 验证码+session 文件和图片的上传功能 HTML Form表单提交,实例展示 views 代码 HTML ajax提交 原生ajax提交,XMLHttpRequest方式上 ...

  5. STL中vector,Map,Set的实现原理

    vector的数据安排以及操作方式,与array非常类似,两者唯一的区别是空间运用的灵活性,array是静态空间,一旦配置了就不能改变,如果你想要大一点的空间,就必须首先配置一块新空间,然后将原来的元 ...

  6. 新发现一个函数:GradientFill

    位于Msimg32.dll之中 https://msdn.microsoft.com/en-us/library/windows/desktop/dd144957(v=vs.85).aspx

  7. PYCURL ERROR 6 - “Couldn't resolve host 'mirrorlist.centos.org'”

    在虚拟机上安装的CentOS,估计是网络配置问题,导致yum update和yum install之类的功能的用不了.出现标题上面的错误. ifdown [network_adapter] ifup ...

  8. 《深入了解 Linq to SQL》之对象的标识 —— 麦叔叔呕心呖血之作

    序言 很多朋友都向我提过,希望我写一下关于Linq to SQL 或者 VS 插件方面的文章.尽管市面上有很多 Linq to SQL 的书籍,但是都是介绍怎么用,缺乏深度.关于 VS 插件方面的书籍 ...

  9. 携程SQL面试题忘大牛解答解决思路

    讨论地址:http://bbs.csdn.net/topics/380208742

  10. UVA10487(二分)

    Given is a set of integers and then a sequence of queries. A query gives you a number and asks to fin ...