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 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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 透明水印生成代码
2012/08/27 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
室内拓展活动方案
2014/02/13 职场文书
运动会开幕词
2015/01/28 职场文书
北京颐和园导游词
2015/01/30 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
实习推荐信格式模板
2015/03/27 职场文书
大学生党课感想
2015/08/11 职场文书
保姆聘用合同
2015/09/21 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript