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

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

首先使用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. Android入门学习:Android 系统框架及应用程序执行过程

    Android基础知识学习 新手上路,还请多多帮助.由于初学,博客内容难免有不正确的地方,还请各位多多指教,相互学习! 主要内容: 1.Android层次架构及主要功能 2.Android编程模型,程 ...

  2. bzoj4096 [Usaco2013 dec]Milk Scheduling

    Description Farmer John has N cows that need to be milked (1 <= N <= 10,000), each of which ta ...

  3. POJ_1321——棋盘问题,回溯+剪枝

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  4. openstack手动玩转

    <一,preface Important Project Network> openstack or all most cloud env Network desgine  is so m ...

  5. 自己写的Ext树,Ext3.4,静态全部加载

    var load = function(){ /** * 书籍资料目录 */ var bookIT = new Ext.tree.TreeNode({ text:"IT", lea ...

  6. JDBC编程之优化

    1.创建 dbconfig.properties driver=com.mysql.jdbc.Driver dburl=jdbc\:mysql\://localhost\:3306/mytest us ...

  7. 6.关于QT中的内存管理,动态的制作,动态库的调用,静态库的制作

     一  QT的内存管理 1  QT中的内存管理是QObject来管理的 2  QT中的内存管理没有cocos2dx中的引用计数 3  组件能够指定父对象 QTimer *timer = QTime ...

  8. Cocos2D-x权威指南: CCNode类方法:

    5.1.4 画图节点CCNode和图层CCLayer CCNode中提供的方法,在public块中的方法主要有下面几个部分: 1.针对节点显示的属性信息读写 2.针对节点变换的属性信息读写 3.针对子 ...

  9. [React Testing] Conditional className with Shallow Rendering

    Often our components have output that shows differently depending on the props it is given; in this ...

  10. UE4学习笔记(三): 为什么使用C++替代UnrealScript?

    原文链接: https://forums.unrealengine.com/showthread.php?2574-Why-C-for-Unreal-4&p=16252&viewful ...