超赞的jQuery幻灯插件 附下载

开发 前端
应朋友的邀请,帮他公司做jQuery缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则排列情况如下:

应朋友的邀请,帮他公司做jQuery缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则排列情况如下:

jQuery

缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则排列情况如下:

0

1 4

2   3

按逆时针方向转一张图后的排列情况如下:

4

0 3

1    2

这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下:

一个幻灯播放效果,效果如下:

jQuery

本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进。下面先来说说缩略图的轮转插件的实现:

1、插件的参数:

  1. this.defaults = {  
  2.        auto: false,        //是否自动播放  
  3.        width: 85,          //缩略图的宽度  
  4.        height: 42,         //缩略图的高度  
  5.        onstart: null,      //开始滚动  
  6.        onchange: null     //滚动事件  
  7. }; 

2、插件的事件:

onstart事件,为每次开始启动轮转时触发一次,转出的参数有:当前缩略图的jQuery对象与轮转到下一次缩略图的jQuery对象:

  1. opt.onstart && opt.onstart  
  2. (me.Images.img[curIdx].img$, me.Images.img[idx].img$); 

onchange事件,为每滚动一次距离就触发一次,并且当前滚动至百分之多少的进度参数:

  1. opt.onchange && opt.onchange(stepPercent[step]); 

下面将要说到 stepPercent[step] 这个数组:

缩略图轮转采用定时不定速度的方式,即每次轮转不过时轮转一张图还是两张图,时间都是固定的,但是轮转两张图的速度要比轮转一张图速度要快,这样即使有再多的图,滚动的距离再远,也不至于要很久才能滚到。

stepPercent[step] 这个数组正是为这个设计的,每次轮转,都固定走15步,每一步轮转的距离都逐渐缩小.

  1. var stepPercent = new Array(15);      
  2. //固定走15步,每步走至百分之多少的一个数列。 表示经过时间一定,速度不固定  
  3. stepPercent[0] = 0.2;               //起始20%  
  4. stepPercent[1] = 0.2 + 0.2 * 0.81;   //第二步  
  5. for (var i = 2, total = stepPercent[1];   
  6. i < stepPercent.length; i++) {  
  7.     stepPercent[i] = total + (total - stepPercent[i - 2]) * 0.81;    
  8. //初始化数列。  
  9.     total = stepPercent[i];  
  10.      if (i == stepPercent.length - 1)  
  11.          stepPercent[i] = 1;  

起始第一步走20%,此后每一步都是前一步的81%,即速度每次递减19%,但是小数计算有个误差,到第15步时可能是个很接近于1,但是不是1的一个数值,所以,将第15步直接设置成1,即100%,滚动结束。

(注:这个数列是如何设计出来的呢,我是用Excel,找一个单元格填上0.2,下一格公式为上一格的0.81,然后往下多拖一点,然后将上面的累加到接近1的数值,就是要的步数了。)

这个数列如果不用JS生成,其实也可以将Excel中创建出来的数列直接定义一个数组,以后如果想要修改速度,再照做一次就行。

轮转时,缩略图的尺寸、透明度、位置等信息的计算,都采用此stepPercent数组设定好的比例因子。

关于插件其他不在赘述,请直接下载源代码查看,下面说说大图如何跟着缩略图滚动。

3、大图滚动

大图在随着缩略图滚动时,不过滚动到第几张,表现出来的效果都是紧跟着当前大图的后面滚进,以防跳过太多张时,由于速度太快,造成眼花缭乱的感觉,所以这里这个onstart事件就派上用场了。

在onstart事件中,先将当前图移动到大图列表首位、再将目标图移动到当前图的后面,(注:要将当前图移动到大图列表首位,是因为有可能下一张在当前张的前面,当前张移到后面,滚动条位置会动)。

然后在onchange事件中,只要根据传入的进度参数,设置横滚动条的滚动距离就行了,大图的滚动就这么简单。具体JS如下:
 

  1. $(function() {  
  2.     $("#div_Slide").Slide({  
  3.         auto: true,  
  4.         width: 85,  
  5.         height: 42,  
  6.         onstart: function(curImg, nextImg) {  
  7.             var cData = curImg.attr("data");  
  8.             var nData = nextImg.attr("data");  
  9.             var bigCur = $("#" + cData), bigNext = $("#" + nData);  
  10.  
  11.             var allBigImg = bigCur.parent().children("img");  
  12.             var curIndex = allBigImg.index(bigCur[0]);  
  13.             var nextIndex = allBigImg.index(bigNext[0]);  
  14.  
  15.             var firstImg = $(allBigImg[0]);  
  16.             if (firstImg.attr("id") != bigCur.attr("id"))  
  17.                 bigCur.insertBefore(firstImg);  
  18.             $("#div_BigImg").scrollLeft(0);  
  19.             bigNext.insertAfter(bigCur);  
  20.         },  
  21.         onchange: function(percent) {  
  22.             $("#div_BigImg").scrollLeft(1263 * percent);  
  23.         }  
  24.     });  
  25.     var bigDiv = $("#div_BigImg");  
  26.     var bigDivPos = bigDiv.position();  
  27.     bigDiv.scrollLeft(0);   
  28.    //初始时将滚动条滚到头,是因为我发现当滚动条不在头时,按F5刷新,滚动条不会跳到头。  
  29.  
  30.     $("#div_Slide").css({  
  31.         "top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px",  
  32.         "left": bigDivPos.left + "px" 
  33.     });  
  34. }); 

源码下载:SlideDemo

原文链接:http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html

【编辑推荐】

  1. 10款给力构建易用性网站的jQuery插件
  2. 10个超赞超实用的免费jQuery图片插件 附下载
  3. jQuery 1.5第一个Beta版发布 付下载
  4. 超炫无比 10个免费的jQuery相册(附下载)
  5. 好戏连台 2010年最佳jQuery插件揭晓(附下载)
责任编辑:陈贻新 来源: Home.Lu的博客
相关推荐

2011-01-21 07:22:48

jQuerywebJavaScript

2012-02-01 09:11:00

jQuery插件

2012-03-19 16:50:03

jQuery插件

2011-06-07 09:22:43

jQueryjQuery插件

2011-10-27 15:08:03

jQuery

2010-12-13 13:33:23

jQuery相册

2011-08-01 15:18:45

jQuery

2018-09-13 21:56:26

深度学习机器学习神经网络

2011-11-25 09:51:26

jQuery插件

2011-02-17 09:29:45

WebjQueryJavascript

2016-01-25 09:49:20

jQuery图片滑块动画

2011-07-06 09:47:05

2010-12-08 09:13:50

jQuery插件

2011-04-01 11:13:57

jQuery

2011-03-18 11:09:42

jQuery

2011-03-22 13:16:49

jQueryjQuery插件

2011-05-10 09:08:09

jQuery插件

2012-11-21 09:53:19

jQueryWeb

2011-11-04 09:09:38

jQuery

2011-05-04 08:36:19

jQueryjavascript
点赞
收藏

51CTO技术栈公众号