<!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

本文出自：http://blog.csdn.net/nancle/article/details/9706023

七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】的更多相关文章

  1. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  2. jquery多组图片层次切换的焦点图

    效果:

  3. jquery全屏图片滑动切换

    在线演示 本地下载

  4. JQ+rotate插件实现图片旋转，兼容IE7+ \ CHROME等浏览器

    插件:/jquery.rotate.min.js CODE: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. 水平垂直居中图片及文字(兼容IE6+)实例

    直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  6. 使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox

    function fnExcelReport() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6'> ...

  7. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  8. 3kb jQuery代码搞定各种树形选择。

    自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * ...

  9. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

随机推荐

  1. webView 加载本地文件 - html/htm pdf docx tx

    - (void)viewDidLoad { [super viewDidLoad]; [self setupUI]; NSString *path = [[NSBundle mainBundle] p ...

  2. 领域驱动设计和实践(转：http://kb.cnblogs.com/page/112298/)

    引言 软件系统面向对象的设计思想可谓历史悠久,20世纪70年代的Smalltalk可以说是面向对象语言的经典,直到今天我们依然将这门语言视为面向对象语言的基础.随着编程语言和技术的发展,各种语言特性层 ...

  3. Codeforces Round #359 div2

    Problem_A(CodeForces 686A): 题意: \[ 有n个输入, +\space d_i代表冰淇淋数目增加d_i个, -\space d_i表示某个孩纸需要d_i个, 如果你现在手里 ...

  4. java web第一个Servlet程序

    Servlet 简介 . Java Servlet是和平台无关的服务器端组件,它运行在Serlet容器中.Servlet容器负责Servlet和客户的通信以及调用Servlet的方法,Servlet和 ...

  5. jQuery弹出层---artDialog 文档

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  6. 基于协同过滤的个性化Web推荐

    下面这是论文笔记,其实主要是摘抄,这片博士论文很有逻辑性,层层深入,所以笔者保留的比较多. 看到第二章,我发现其实这片文章对我来说更多是科普,科普吧…… 一.论文来源 Personalized Web ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  8. LCD 和 LED 的区别？

    http://sxlecd.blog.163.com/blog/static/131722380200911810564930/

  9. 《ArcGIS Engine+C#实例开发教程》第六讲 右键菜单添加与实现

    原文:<ArcGIS Engine+C#实例开发教程>第六讲 右键菜单添加与实现 摘要:在这一讲中,大家将实现TOCControl控件和主地图控件的右键菜单.在AE开发中,右键菜单有两种实 ...

  10. MapReduce 模式、算法和用例（MapReduce Patterns, Algorithms, and Use Cases)

    在新文章“MapReduce模式.算法和用例”中,Ilya Katsov提供了一个系统化的综述,阐述了能够应用MapReduce框架解决的问题. 文章开始描述了一个非常简单的.作为通用的并行计算框架的 ...