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

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

首先使用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. Mysql时间戳开始时间1970-01-01 00:00:00和PHP date慢8小时

    mysql> select unix_timestamp('1970-01-01 00:00:01');+---------------------------------------+| un ...

  2. 设计模式 ( 十六 ): Mediator中介者模式 -- 行为型

    1.概述 在面向对象的软件设计与开发过程中,根据“单一职责原则”,我们应该尽量将对象细化,使其只负责或呈现单一的职责,即将行为分布到各个对象中. 对于一个模块或者系统,可能由很多对象构成,而且这些对象 ...

  3. 【转】C语言文件操作解析(三)

    原文网址:http://www.cnblogs.com/dolphin0520/archive/2011/10/07/2200454.html C语言文件操作解析(三) 在前面已经讨论了文件打开操作, ...

  4. JavaScript新手学习笔记4——我记不住的几个坑:短路逻辑、按值传递、声明提前

    1.短路逻辑 逻辑运算中,如果前一个条件已经可以得出最终结论,则后续所有条件不再执行!这里的逻辑运算指的是逻辑与和逻辑或. 我们要理解逻辑与是两个条件都为真的时候,才为真,如果第一个就是假的,那么后面 ...

  5. ajax返回json数组遍历添加到html

    大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:

  6. window+Apache 配置虚拟主机(2)

    1. 打开虚拟主机功能 2. 设置虚拟主机相应的文件夹 3. 将虚拟的域名绑定到127.0.0.1 4. 结果图: 记忆一下,突然感觉都忘记了!

  7. CentOS6.7 用户

    1.添加普通用户[root@server ~]# useradd chenjiafa   //添加一个名为chenjiafa的用户[root@server ~]# passwd chenjiafa   ...

  8. 关于获得本机Mac Address的方法

    网络上有讲获得Mac address的方法有如下: 1. 发送ARP命令,利用返回的Mac Address缓冲区得到 2. 用NetworkInterface.GetAllNetworkInterfa ...

  9. JS简单实现图片切换

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  10. JAVA 泛型练习

    二分查找: public class Q212 { public static void main(String [] args) { Integer []arr = {1,2,3,4,5,6,7,8 ...