jquery幻灯片--渐变
网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用。
想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新。
首先使用jquery做渐变效果,一般使用fadeOut/fadeIn(渐入渐出)效果。
但是因为fadeOut/fadeIn在停止效果时,使用stop()会产生不可预估的效果。
所以在做效果时,使用的方法是animate,通过设定透明度(opacity)来实现效果。因为图片显示在同一个位置,所以存在层叠问题。解决这个问题的方式是通过控制元素的z-index,将想要显示的图片显示。
创建几个函数
switch_pic 用于执行图片切换效果。
auto_switch_pic 通过调用switch_pic函数,实现定时切换页面效果。
click_trigger 切换图片效果触发器
技术细节
定时切换效果和触发切换效果会存在以下冲突
首先当定时切换还差一秒时,你发动了触发切换,刚放上去,就又自动切换到下一个图片去了。
解决方式,当鼠标在触发器内时,停止定时切换效果。
jquery幻灯片--渐变的更多相关文章
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
随机推荐
- 【转】【Android UI设计与开发】之详解ActionBar的使用,androidactionbar
原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...
- spring aop实现原理
通过两种代理方式,一是JDK本身的代理方式,二是CGLIB提供的代理方式,在代理类的前面加事务begin,在后面加事务commit,需要的数据库连接从ThreadLocal中取
- linux下常用FTP命令
linux下常用FTP命令 1. 连接ftp服务器 1. 连接ftp服务器格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1b)服 ...
- socket实现局域网通信
今天实现了一个局域网通信的小例子,上来记录一下,代码不成熟,勿拍. 这是我本机客户端: 这是我虚拟机的客户端. 我为他们分配了静态IP,这样就可以实现局域网通信了.注意代码中必须把监视线程的IsBac ...
- 最最常用的 100 个 Java 类(转)
大部分的 Java 软件开发都会使用到各种不同的库.近日我们从一万个开源的 Java 项目中进行分析,从中提取出最常用的 Java 类,这些类有来自于 Java 的标准库,也有第三方库.每个类在同一个 ...
- C++ primer 中文第三版 阅读笔记 第八章
一.寄存器对象: 函数中频繁被使用的变量可以加上register就可声明为寄存器对象.对于寄存器对象,假如能够放到寄存器中就会放到寄存器中,放不到的话就放到内存中.比如 register int a ...
- 命令行修改linux系统IP
修改配置文件/etc/sysconfig/network-scrips/ifcfg-eth0.因为机子启动的时候加载的就是这个文件的配置参数.对这个文件进行修改: [root@localhost ...
- java中不常见的keyword:strictfp,transient
1.strictfp, 即 strict float point (精确浮点). strictfp keyword可应用于类.接口或方法.使用 strictfp keyword声明一个方法时,该方法中 ...
- this关键字之一个有趣的用法
this关键字 1.首先一个用处就是代表当前类的对象. 2.当我们对构造函数进行重载的时候代码如下: public class Class1 { public string Name { get; s ...
- js库编写的环境和准备工作
在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调 ...