简单的jQuery幻灯片实现
一、一些抱怨
自从国庆放假上班以来,又是忙碌的工作直到现在,但是说忙好像也没有加几天班,只是上班的时候工作排的挺满。但是别人貌似一直都不太忙(也是我自己觉得),感觉就很不爽。
我喜欢快速做完一件事,然后剩下的时间可以很充裕,一边学习一边去改进之前的东西。却总发现如果你做的越快,下一件事就来的越快。总会思考,是应该很努力的去工作,还是装作很努力的去工作。
我发现,对于在小城市工作的程序员来说,在小公司里面,而且是做前端这种无足轻重的工作,常常会有看不到一点未来的感觉。总会羡慕那些在北上广的同学,但一方面又想呆在家里。
而且有很多想法,但是行动力又严重不足。就好比写博客。为什么会写博客,一方面是想,如果哪天不做IT了,总要有点东西用来证明自己做过IT吧(或者说以后可以翻出来看看回忆一下)。另一方面觉得如果连写个博客都坚持不了,那也没有毅力去完成自己想干的事了。
记得当时想每个礼拜写一篇,无论如何都要写一篇。现在看来,差点就完全失败了。所以趁着还有一点激情,就写了这篇。本来不想写的,心想这个有什么好写的。但是呢,貌似很多事我都是有这种想法导致最后就越来越没有去坚持了。如果现在不写,估计就没有以后了吧。
二、正文
这篇文章就是说说自己写的一个jQuery幻灯的插件
先看看效果
源码地址在Github上,大家可以下载一下,点这里下载 。 进去后你可以发现在右边侧边栏下方有一个Download ZIP按钮,点击这个就可以下载了。
三、实现过程
首先,这个效果是一个淡入淡出的切换。
大体上实现思路就是,先写好html结构,其中只需要主体图片部分。像底部控制按钮和两侧控制按钮通过js来添加,这样也就方便实现通过参数决定是否需要这两个功能。
css部分实现思路是通过绝对定位把他们叠加到一起。通过控制透明度来实现淡入。
js部分,核心就是一个show(index)方法,其中index就是需要显示的图片序号。例如当鼠标移动到第一个点,这时。我就将第一个点的图片的zindex值提到最高,但是让它的opacity等于0,也就是完全透明,然后在使用animate方法让它的zindex为1.这样就可以了。当然,你还需要一个变量记录下你当前显示的图片的序号,因为每点击一次,需要复位一下,这时你可以把你当前的zindex设置为1,而你现在选择的设置为2,最后你需要现在选择的序号赋值给当前的。(这句话好绕,还是直接看源码比较简单,其中index是你即将选择的图的序号,preIndex目前最上面的那张图序号)
本来想贴源码,不过感觉在博客园看源码还没有Github看舒服,而且Github上我还写了调用方法,参数等一些信息。源码还是去这里看把。都在src文件夹里面。
转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ,请勿用于任何商业用途
简单的jQuery幻灯片实现的更多相关文章
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
随机推荐
- ubuntu安装vim时提示 没有可用的软件包 vim,但是它被其它的软件包引用了 解决办法
ubuntu安装vim时提示 没有可用的软件包 vim-gtk3,但是它被其它的软件包引用了 解决办法 本人在ubuntu系统安装vim 输入 sudo apt-get install vim 提示 ...
- Win10 UI入门 圆形控件
动态模版绑定 http://blog.csdn.net/XXChen2/article/details/4552554
- 在IIS8.5的环境下配置WCF的Restful Service
今天在客户的环境中(Windows Server 2012 R2 + IIS 8.5)搭建Call WCF Restful Service的功能,发现了几个环境配置的问题,记录如下: 1):此环境先安 ...
- 被Unity5坑惨了
各种不明所以的crash,导致crash率从0.5%瞬间暴涨到10%. Unity5还是非常不稳定,慎入慎入...
- asterisk简单命令
重启asterisk [root@EC2-V2 ~]# service asterisk restart 进入asterisk操作界面 [root@EC2-V2 ~]# asterisk -vvvr ...
- 动画效果interpolator
Interpolator 被用来修饰动画效果,定义动画的变化率 AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速 Accel ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- nodejs复习03
文件系统fs 重命名 fs.rename() fs.renameSync 优先选择异步,可以进行异常判断 打开关闭文件 fd = fs.openSync(file, flags) fs.closeSy ...
- 【转】浅谈truncate的使用
delete 操作不会改变表的高水标记,因此如果我们对一个表插入1000万条数据,然后再回滚(对insert操作做回滚相当于相应地做delete操作),会使表的高水标记增长得很高,这时虽然我们操作的表 ...
- 【原】iOS学习之NSDate在项目中的一些类目扩展
在项目中,我们可能会面对各种各样的对于时间的需求,在这里提供几种可能会用到的需求代码 1.与今天的时间做比较,返回日期差值 代码: - (NSInteger)compareWithToday { NS ...