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 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
JavaScript运行原理分析
Feb 09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 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中让人头疼的浮点数运算分析
2016/10/10 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python实现归并排序算法
2018/11/22 Python
python实现五子棋小游戏
2020/03/25 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
《生命 生命》教学反思
2014/04/19 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
体检通知范文
2015/04/21 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技