网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用。

想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新。

首先使用jquery做渐变效果,一般使用fadeOut/fadeIn(渐入渐出)效果。

但是因为fadeOut/fadeIn在停止效果时,使用stop()会产生不可预估的效果。

所以在做效果时,使用的方法是animate,通过设定透明度(opacity)来实现效果。因为图片显示在同一个位置,所以存在层叠问题。解决这个问题的方式是通过控制元素的z-index,将想要显示的图片显示。

创建几个函数

switch_pic      用于执行图片切换效果。
auto_switch_pic    通过调用switch_pic函数,实现定时切换页面效果。

click_trigger      切换图片效果触发器

技术细节

定时切换效果和触发切换效果会存在以下冲突

首先当定时切换还差一秒时,你发动了触发切换,刚放上去,就又自动切换到下一个图片去了。

解决方式,当鼠标在触发器内时,停止定时切换效果。

jquery幻灯片--渐变的更多相关文章

  1. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  2. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  3. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  4. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  6. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  7. 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效

    这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...

  8. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  9. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

随机推荐

  1. 组合索引leaf 数据存储

    1 Z 2 X 3 U 4 T 5 G 6 F 7 C 8 B 9 A 1 A 2 B 3 C 4 D Oracle的索引是以平衡树的方式组织存储的:保存的是索引列的值,以及该行的rowid的一部分( ...

  2. javascript变量:全局?还是局部?这个得注意!

    做项目就是一个学习的过程! 做为一个学习C3年多,从C程序员转前端的人来说,javascript中的许多规则是没办法或者说一时半会理解不了的. 今天就遇到了一个,大致就是这么个代码. var a ; ...

  3. Redis应用场景 及其数据对象 string hash list set sortedset

    原文地址:http://www.cnblogs.com/shanyou/archive/2012/09/04/2670972.html Redis开创了一种新的数据存储思路,使用Redis,我们不用在 ...

  4. C++中的string类(2)

    相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...

  5. tungsten开机启动及进程开启停止

  6. 远程连接mysql

    win系统下,连接别人的mysql或者让别人链接自己的mysql: 打开命令行cmd 进入mysql: mysql -u root -p mysql>use mysql;  mysql>s ...

  7. Zend Studio使用

    也许你能够用Dreamweaver.Notepad++或者Editplus这种东西完毕你的系统,但所谓“工欲善其事,必先利其器”,偶觉得 一个给力的IDE对于新手还是非常必要的,而Zend作为PHPe ...

  8. 怎么设置tomcat管理员的用户名和密码

    我们常常要进入Tomcat的管理界面来进行相应的操作,我们首先得有一个管理员的账户和密码.而Tomcat默认是没有管理员账户的,那么我们该怎么来添加一个管理员账户呢? 如果我们输入错误的Tomcat管 ...

  9. Python - SQLAlchemy之连表操作

    ORM的两种创建方式 数据库优先:指的是先创建数据库,包括表和字段的建立,然后根据数据库生成ORM的代码,它是先创建数据库,再创建相关程序代码 代码优先:就是先写代码,然后根据代码去生成数据库结构. ...

  10. oracle 优化——索引与组合索引

    1.索引结构.第一张图是索引的官方图解,右侧是存储方式的图解. 图中很清晰的展示了索引存储的状况. 在leaf 节点中存储了一列,索引所对应项的 :值,rowId,长度,头信息(控制信息) 这样我们就 ...