jQuery 幻灯片插件(带缩略图功能)


Posted in Javascript onJanuary 24, 2011

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

 1 4

 3

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

 0 3

  2

这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下:
jQuery 幻灯片插件(带缩略图功能)
本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进。下面先来说说缩略图的轮转插件的实现:
1、插件的参数:

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

2、插件的事件:

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

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

onchange事件,为每滚动一次距离就触发一次,并且当前滚动至百分之多少的进度参数:
opt.onchange && opt.onchange(stepPercent[step]);

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

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

stepPercent[step] 这个数组正是为这个设计的,每次轮转,都固定走15步,每一步轮转的距离都逐渐缩小,这样就达到了一个变速的效果,生成此数组的如下:

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

$(function() { 
$("#div_Slide").Slide({ 
auto: true, 
width: 85, 
height: 42, 
onstart: function(curImg, nextImg) { 
var cData = curImg.attr("data"); 
var nData = nextImg.attr("data"); 
var bigCur = $("#" + cData), bigNext = $("#" + nData); 
var allBigImg = bigCur.parent().children("img"); 
var curIndex = allBigImg.index(bigCur[0]); 
var nextIndex = allBigImg.index(bigNext[0]); 
var firstImg = $(allBigImg[0]); 
if (firstImg.attr("id") != bigCur.attr("id")) 
bigCur.insertBefore(firstImg); 
$("#div_BigImg").scrollLeft(0); 
bigNext.insertAfter(bigCur); 
}, 
onchange: function(percent) { 
$("#div_BigImg").scrollLeft(1263 * percent); 
} 
}); 
var bigDiv = $("#div_BigImg"); 
var bigDivPos = bigDiv.position(); 
bigDiv.scrollLeft(0);
//初始时将滚动条滚到头,是因为我发现当滚动条不在头时,按F5刷新,滚动条不会跳到头。 
$("#div_Slide").css({ 
"top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px", 
"left": bigDivPos.left + "px" 
}); 
});

源码下载:http://xiazai.3water.com/201101/yuanma/SlideDemo_3water.rar
在使用中发现有问题或者有可改进的地方,请留言,谢谢。
Javascript 相关文章推荐
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 #Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 #Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 #Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 #Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 #Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 #Javascript
无阻塞加载脚本分析[全]
Jan 20 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP7新功能总结
2019/04/14 PHP
jquery 插件学习(四)
2012/08/06 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python学习笔记(二)基础语法
2014/06/06 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
浅谈Python中的模块
2020/06/10 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
联想C++笔试题
2012/06/13 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
学生励志演讲稿
2014/01/06 职场文书
房屋出售协议书
2014/04/10 职场文书
艾滋病宣传标语
2014/06/25 职场文书
施工单位安全责任书
2014/07/24 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
大学生简短的自我评价
2014/09/12 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
数学复习课教学反思
2016/02/18 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server