简单的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 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
随机推荐
- jQuery中的Ajax - Codeigniter版本
发送(view中): $.ajax({ type : 'post', url : 'add', data : { 'nickname':nickname, 'mobile':mobile, 'sex' ...
- 18.Java泛型
1.为什么需要泛型 List list1=new ArrayList(Arrays.asList(new String("string"),new Integer(20))); S ...
- Java面试连环炮问题收集记录贴【JVM方面】
写这类文章是为了记录下网上看到的/自己经历的一些一环扣一环的面试问题,一方面提高自己的理论知识,另外一方面也给自己去参加面试或面试他人提供点参考和帮助. 问题一: 为什么一个对象会被GC? 对象在进行 ...
- ng-table 简单实例
今天用的AngularJs需要做个分页,于是用ng-table去实现,不过这个官网感觉有点坑,说的不够清楚. 下面实现了一个Demo实力,代码如下: <!DOCTYPE html> < ...
- 蓝桥杯算法提高 P1001(大数乘法)
算法提高 P1001 时间限制:1.0s 内存限制:256.0MB 当两个比较大的整数相乘时,可能会出现数据溢出的情形.为避免溢出,可以采用字符串的方法来实现两个大数之间的乘法. 具体 ...
- flume+kafka+spark streaming整合
1.安装好flume2.安装好kafka3.安装好spark4.流程说明: 日志文件->flume->kafka->spark streaming flume输入:文件 flume输 ...
- python tkinter
1. 在python3中使用 import tkinter 异常:no module named _tkinter apt-get install python-tk
- mybatis多表查询
1.在类的属性里定义另一个关联类,在mapper.xml里写result-mapper加association 2.表很多的话,可以在数据库里建视图view,把不同表里需要的字段写到一张视图里 写po ...
- C++-Qt【2】-实现一个简单的记事本
用Qt实现一个简单的记事本: #include "helloqt.h" #include <qfiledialog.h> #include <qfile.h> ...
- 亲临现场不是梦,2017央视春晚推出VR直播
自里约奥运会首次试水VR直播 后,用户开始关注这种观影方式,一瞬间VR直播开始流行.就在月初,江苏卫视宣布2017年跨年晚会将进行VR全景直播.当然,央视是绝对不会错过这中潮流方式. 据悉,央视201 ...