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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
详解jQuery中的easyui
Sep 02 jQuery
详细分析vue响应式原理
Jun 22 Javascript
微信小程序实现可长按移动控件
Nov 01 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
第八节--访问方式
2006/11/16 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
JS 建立对象的方法
2007/04/21 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
利用Python如何生成随机密码
2016/04/20 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python with (as)语句实例详解
2020/02/04 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
五一劳动节慰问信
2015/02/14 职场文书
社区党员干部承诺书
2015/05/04 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
Javascript webpack动态import
2022/04/19 Javascript