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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
javascript计算渐变颜色的实例
Sep 22 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python中关于浮点数的冷知识
2019/09/22 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Python 解析xml文件的示例
2020/09/29 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
美术毕业生求职信
2014/02/25 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
小班上学期评语
2014/05/05 职场文书
春节晚会开场白
2015/05/29 职场文书