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

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

首先使用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. UML建模之时序图

    现在是二月,而且到如今你或许已经读到.或听到人们谈论UML 2.0 —— 包括若干进步的 UML 的新规范,所做的变化.考虑到新规范的重要性,我们也正在修改这个文章系列的基础,把我们的注意力从 OMG ...

  2. Raid1源代码分析--Barrier机制

    本想就此结束Raid1的专题博客,但是觉得Raid1中自己构建的一套barrier机制的设计非常巧妙,值得单独拿出来分析.它保证了同步流程和正常读写流程的并发性,也为设备冻结/解冻(freeze/un ...

  3. zookeeper[3] zookeeper API开发注意事项总结

    如下是根据官方接口文档(http://zookeeper.apache.org/doc/r3.4.1/api/org/apache/zookeeper/ZooKeeper.html#register( ...

  4. LaunchScreen.xib 设置启动图

    1.LaunchScreen.xib 中拖入UIImageView 约束都设置为0 2.新建一个Image Set 起名为LaunchScreen  Devices设置为:Device Speecif ...

  5. JavaScript 对象属性的遍历

    ES6一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). (2)Object.keys(obj) Object. ...

  6. protobuf2.5 iphone5s中崩溃的问题

    我们的游戏用到了protobuf2.5,在其他版本中都是好的,但iphone5s中崩溃,表现为针对DescriptorPool为空了.网上也找不到什么信息,xiaozhong同学各种尝试,都没有搞定, ...

  7. StringBuffer学习笔记

    StringBuffer是什么? StringBuffer是使用缓冲区的,本身也是操作字符串的,它是一个具体的操作类.与String类不同的是,它其中的内容是可以改变的.它不能像String那样采用直 ...

  8. Log4Qt使用(三)在DailyRollingFileAppender类中增加属性mMaxBackupIndex

    在Log4Qt中存在一个比较大的问题,当使用 DailyRollingFileAppender对日志进行输出时,会无限输出文件,也就是说,当系统运行很久时,日志文件有可能很大,大到无法想象.因此,很多 ...

  9. Java基础知识强化48:Java中哈希码

    1.概念:      哈希其实只是一个概念,没有什么真实的指向.它的目的是保证数据均匀的分布到一定的范围内.所以不同数据产生相同的哈希码是完全可以的.      现在是站在JAVA虚拟机的角度来看内存 ...

  10. 206.反转单列表 Reverse Linked List

    Reverse a singly linked list. 使用栈 public class Solution { public ListNode ReverseList(ListNode head) ...