搜索
首页web前端js教程jQuery 幻灯片插件(带缩略图功能)_jquery

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

    0

   1 4

  2   3

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

    4

   0 3

  1    2

  这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下:
jQuery 幻灯片插件(带缩略图功能)_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[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.jb51.net/201101/yuanma/SlideDemo_jb51.rar
在使用中发现有问题或者有可改进的地方,请留言,谢谢。
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript:探索网络语言的多功能性JavaScript:探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的演变:当前的趋势和未来前景JavaScript的演变:当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript:它的作用以及为什么重要神秘的JavaScript:它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python还是JavaScript更好?Python还是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安装JavaScript?如何安装JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

在Quartz中如何在任务开始前发送通知?在Quartz中如何在任务开始前发送通知?Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前发送任务通知在使用Quartz定时器进行任务调度时,任务的执行时间是由cron表达式设定的。现�...

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)