文档章节

牛逼的轮播图插件

问题达人
 问题达人
发布于 2016/04/06 08:58
字数 1145
阅读 67
收藏 0

   jcarousellite轮播图插件,对于这个插件我想说真的是太牛逼了,不管是轮播图、图片滚动等各种样式都可以实现,而且展现形式由你而定,他只需要几个翻页的 选择器就可以了~~~ 真的是能满足各种效果且使用。。。


    下面是使用过程中需要注意的几个问题:

        1.easing      string 缓冲效果名称,如:easing: "bounceout",需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2

easing这个参数只适用于jquery1.2版本,去掉这个参数后,在jquery1.4.2下面使用正常。



官方站点:http://gmarwaha.com/jquery/jcarousellite/

 

结构:

 

Html代码   收藏代码
  1. <div class="carousel">  
  2.      <ul>  
  3.          <li><img src="image/1.jpg" alt="1"></li>  
  4.          <li><img src="image/2.jpg" alt="2"></li>  
  5.          <li><img src="image/3.jpg" alt="3"></li>  
  6.       </ul>  
  7. </div>  

 样式:

   主要控制 li 的宽与高。

 

js在html里的调用:

 

Js代码   收藏代码
  1. $(".carousel").jCarouselLite({  
  2.       btnNext: ".next",  
  3.       btnPrev: ".prev"  
  4. });  

 js地址:

    http://www.estorm.cn/blog/demo/09/1109/jcarousellite_1.0.1.js

 

参数说明:

   btnPrev : 上一张按钮
btnNext : 下一张按钮
btnGo : 标签控制,也就是用’1,2,3,4…’来控制
mouseWheel : 是否支持鼠标滑轮滚动,属性值:false / true;默认为false 打开此项需要jQuery UI插件支持
auto : 设置自动播放的速度,默认自动播放是关闭的,格式 auto: 800 (为播放速度)
speed : 动画效果速度
easing : 动画效果优化,姑且这么里面 需要外部插件支持
vertical : 动画方向,如果设置为true,则表示垂直滚动,默认为false
circular : 是否重复播放,如果设置为false,则到最后一个下一张按钮就点不动了,到第一张上一张按钮就点不动
visible : 设置默认显示几个li,默认是3个
start : 效果从第几个开始,默认为0
scroll : 一次滑动几个li,默认是2
beforeStart : 这个是接口,每次滑动效果执行之前执行的自定义函数
afterEnd : 这个是接口,每次滑动效果执行之后执行的自定义函数

 

主要强调的是我改一部分:

 

Js代码   收藏代码
  1. (function($) {                                          // Compliant with jquery.noConflict()  
  2. $.fn.jCarouselLite = function(o) {  
  3.     o = $.extend({  
  4.         btnPrev: null,  
  5.         btnNext: null,  
  6.         btnGo: null,  
  7.         mouseWheel: false,  
  8.         auto: null,  
  9.   
  10.         speed: 200,  
  11.         easing: null,  
  12.   
  13.         vertical: false,  
  14.         circular: true,  
  15.         visible: 3,  
  16.         start: 0,  
  17.         scroll: 1,  
  18.   
  19.         beforeStart: null,  
  20.         afterEnd: null  
  21.     }, o || {});  
  22.   
  23.     return this.each(function() {                           // Returns the element collection. Chainable.  
  24.   
  25.         var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";  
  26.         var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;  
  27.   
  28.         if(o.circular) {  
  29.             ul.prepend(tLi.slice(tl-v-1+1).clone())  
  30.               .append(tLi.slice(0,v).clone());  
  31.             o.start += v;  
  32.         }  
  33.   
  34.         var li = $("li", ul), itemLength = li.size(), curr = o.start;  
  35.         div.css("visibility""visible");  
  36.   
  37.         li.css({overflow: "hidden"float: o.vertical ? "none" : "left"});  
  38.         ul.css({margin: "0", padding: "0", position: "relative""list-style-type""none",   
  39.                    "z-index""1"});  
  40.         div.css({overflow: "hidden", position: "relative""z-index""2", left: "0px"});  
  41.   
  42.         var liSize = o.vertical ? height(li) : width(li);    
  43.         // Full li size(incl margin)-Used for animation  
  44.         var ulSize = liSize * itemLength;                    
  45.        // size of full ul(total length, not just for the visible items)  
  46.         var divSize = liSize * v;                            
  47.        // size of entire div(total length for just the visible items)  
  48.   
  49.         li.css({width: li.width(), height: li.height()});  
  50.         ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));  
  51.       <span style="color: #ff0000;">//图片从第一个开始显示。(系统默认显示的3个,但是这3个,它会隐藏掉,  
  52.         所以我把-(curr*liSize)改为0就可以了。)   
  53.       //修改后的: ul.css(sizeCss, ulSize+"px").css(animCss, 0); </span>  
  54.   
  55.   
  56.   
  57.         div.css(sizeCss, divSize+"px");                       
  58.        // Width of the DIV. length of visible images  
  59.   
  60.         if(o.btnPrev)  
  61.             $(o.btnPrev).click(function() {  
  62.                 return go(curr-o.scroll);  
  63.             });  
  64.   
  65.         if(o.btnNext)  
  66.             $(o.btnNext).click(function() {  
  67.                 return go(curr+o.scroll);  
  68.             });  
  69.   
  70.         if(o.btnGo)  
  71.             $.each(o.btnGo, function(i, val) {  
  72.                 $(val).click(function() {  
  73.                     return go(o.circular ? o.visible+i : i);  
  74.                 });  
  75.             });  
  76.   
  77.         if(o.mouseWheel && div.mousewheel)  
  78.             div.mousewheel(function(e, d) {  
  79.                 return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);  
  80.             });  
  81.   
  82.         if(o.auto)  
  83.             setInterval(function() {  
  84.                 go(curr+o.scroll);  
  85.             }, o.auto+o.speed);  
  86.   
  87.         function vis() {  
  88.             return li.slice(curr).slice(0,v);  
  89.         };  
  90.   
  91.         function go(to) {  
  92.             if(!running) {  
  93.   
  94.                 if(o.beforeStart)  
  95.                     o.beforeStart.call(this, vis());  
  96.   
  97.                 if(o.circular) {            // If circular we are in first or last, then goto the other end  
  98.                     if(to<=o.start-v-1) {           // If first, then goto last  
  99.                         ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");  
  100.                         // If "scroll" > 1, then the "to" might not be equal to the condition;   
  101.                            it can be lesser depending on the number of elements.  
  102.                         curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;  
  103.                     } else if(to>=itemLength-v+1) { // If last, then goto first  
  104.                         ul.css(animCss, -( (v) * liSize ) + "px" );  
  105.                         // If "scroll" > 1, then the "to" might not be equal to the condition;  
  106.                            it can be greater depending on the number of elements.  
  107.                         curr = to==itemLength-v+1 ? v+1 : v+o.scroll;  
  108.                     } else curr = to;  
  109.                 } else {                    // If non-circular and to points to first or last, we just return.  
  110.                     if(to<0 || to>itemLength-v) return;  
  111.                     else curr = to;  
  112.                 }                           // If neither overrides it, the curr will still be "to" and we can proceed.  
  113.   
  114.                 running = true;  
  115.   
  116.                 ul.animate(  
  117.                     animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,  
  118.                     function() {  
  119.                         if(o.afterEnd)  
  120.                             o.afterEnd.call(this, vis());  
  121.                         running = false;  
  122.                     }  
  123.                 );  
  124.                 // Disable buttons when the carousel reaches the last/first, and enable when not  
  125.                 if(!o.circular) {  
  126.                     $(o.btnPrev + "," + o.btnNext).removeClass("disabled");  
  127.                     $( (curr-o.scroll<0 && o.btnPrev)  
  128.                         ||  
  129.                        (curr+o.scroll > itemLength-v && o.btnNext)  
  130.                         ||  
  131.                        []  
  132.                      ).addClass("disabled");  
  133.                 }  
  134.   
  135.             }  
  136.             return false;  
  137.         };  
  138.     });  
  139. };  
  140.   
  141. function css(el, prop) {  
  142.     return parseInt($.css(el[0], prop)) || 0;  
  143. };  
  144. function width(el) {  
  145.     return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');  
  146. };  
  147. function height(el) {  
  148.     return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');  
  149. };  
  150.   
  151. })(jQuery);  
 

问题:在修改之后,如果你定了显示的图片个数后,在没有满这个数时,你翻页的话,他翻了页之后就不能返回来了。

© 著作权归作者所有

问题达人
粉丝 14
博文 94
码字总数 87450
作品 0
昌平
程序员
私信 提问
LvJianfeng/LLNoDataView

LLNoDataView 超简单的空数据提示通用View!!!!! 什么,简单到不行了!!!真的超级简单的使用!!!其实有牛逼的空数据展示那种,应该都知道,但是使用上就是太过繁琐,需要实现很多,所...

LvJianfeng
2016/04/19
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/20
0
0
vue轮播组件实现,$children和$parent,附带好用的gif录制工具

个人感情部分(不喜欢的童鞋请忽略,纯属个人吐槽): 1、先提前预祝大家国庆节玩的愉快,我国庆要见家长去了(忐忑) 2、忍不住想要为小米正名,虽然我是米粉但是我是理智粉。 24号不是mix...

海天酱油爱学习
09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

领域驱动中的“贫血症和失忆症”

贫血症严重危害着人类健康,并且伴随有危险的副作用。当贫血领域对象被首次提出来时,它并不是一个博得赞美的词汇,它描述的是一个缺少内在行为领域对象。奇怪的是,人们对于贫血领域对象的态...

还仙
16分钟前
4
0
条码打印软件中标签预览正常打印无反应怎么解决

在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决。 一、预览正常情况下,打印没反应 (1)在条码...

中琅软件
26分钟前
4
0
判断字符串的时候

判断字符串的时候一定把常量房前边, //报警程度 String leve = vo.getDeviceAlertDeal().getWarnLevel(); if(("0").equals(leve)) { row.add("无报警"); }else if(("1").equals(leve)) { ro......

简小姐
26分钟前
5
0
Linux maven3.6.2 install

PS:安装 maven 之前请先安装 jdk 1.安装 wget 命令(安装过就不用了) yum -y install wget 2.寻找需要的 maven 版本 https://maven.apache.org/download.cgi 3.进入 /var/local 文件夹 cd...

东方神祇
29分钟前
4
0
Tomcat源码分析二:先看看Tomcat的整体架构

Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server、Service、Connector、Container等组件,接下...

flygrk
31分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部