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 相关文章推荐
JavaScript小技巧 2.5 则
Sep 12 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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防止form重复提交的方法
2013/07/01 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP使用函数用法详解
2018/09/30 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
对python 调用类属性的方法详解
2019/07/02 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
优秀村官事迹材料
2014/01/10 职场文书
美术专业个人自我评价
2014/01/18 职场文书
土木工程专业推荐信
2014/02/19 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL