jquery实现图片渐变切换兼容ie6/Chrome/Firefox


Posted in Javascript onAugust 02, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="Nancle from CAU CS101" /> 
<title>jQuery图片渐变切换</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<style type="text/css"> 
ul{position:relative;} 
ul li{display:block; position:absolute; left:0; top:0} 
img{width:480px; height:320px; border:5px solid #ccc} 
</style> 
</head> 
<body> 
<ul> 
<li><img src="http://down.fpwap.com/UploadFiles/sjbz/2010/6/2010615222757.jpg" /></li> 
<li><img src="http://img5.cache.netease.com/m/app/201108/31/953DDLJL.jpg" /></li> 
<li><img src="http://i-imgp.fetionpic.com/fphoto/photo1/M00/41/83/rBUyIVHfdvC9LAM6AAC873sDEoo981.jpg" /></li> 
<li><img src="http://img.bimg.126.net/photo/L0py2I9-0qIAd_Keov5GhQ==/1710804908448128265.jpg" /></li> 
</ul> 
</div> 
<script> 
var switchSpeed = 1000; //图片切换时间 
var fadeSpeed = 1500; //渐变时间 
setInterval(function(){ 
$('img').last().fadeOut(fadeSpeed, function(){ 
$(this).show().parent().prependTo($('ul')); 
}); 
}, switchSpeed); 
</script> 
</body> 
</html>

效果预览:http://quchen.cau.edu.cn/jsDev/gradien.html
Javascript 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 #Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 #Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 #Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 #Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 #Javascript
js动态给table添加/删除tr的方法
Aug 02 #Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 #Javascript
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP图片水印类的封装
2017/07/06 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
angular4自定义组件详解
2017/09/28 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python PyQt5标准对话框用法示例
2017/08/23 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python 常见的排序算法实现汇总
2020/08/21 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
党的群众路线对照检查材料范文
2014/09/24 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
幼儿园六一主持词
2015/06/30 职场文书