<!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. 1行代码为每个Controller自定义“TabBar”-b

    这篇文章大致会带你实现以下的功能,废话少说,先看东西: JPNavigationController.gif Q&A:Demo里都有那些东西? 01.关于自定义导航栏 01.第一个控制器的导航 ...

  2. CSS随手记

    html5模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  3. datanode无法连接到master

    初次在VM上配置Hadoop,开了三台虚拟机,一个作namenode,jobtracker 另外两台机子作datanode,tasktracker 配置好后,启动集群 通过http://localho ...

  4. redis info 各信息意义

    redis_version:2.4.16 # Redis 的版本redis_git_sha1:00000000redis_git_dirty:0arch_bits:64multiplexing_api ...

  5. Linux下打包压缩成war包和解压war包

    一. 打包成war包 因为种种原因公司需要把java程序达成war包.起先用zip命令打包,起先可以用,后来却无法使用.今天找到一个更好的办法.用jar命令,前提是要安装jdk. 把当前目录下的所有文 ...

  6. Linux下的绘图（流程图、UML、mindmap)工具

    http://blog.csdn.net/piyajee/article/details/5902380

  7. RedHat Linux 下安装MPlayer 编译源代码方式

    http://blog.csdn.net/hotday_kevin/article/details/6874703

  8. [译]GotW #4 Class Mechanics

    你对写一个类的细节有多在行?这条款不仅注重公然的错误,更多的是一种专业的风格.了解这些原则将会帮助你设计易于使用和易于管理的类. JG Question 1. 什么使得接口“容易正确使用,错误使用却很 ...

  9. java集合类——Stack类

    查看java的API文档,Stack继承Vector类. 栈的特点是后进先出. API中Stack自身的方法不多,基本跟栈的特点有关. import java.util.Stack; public c ...

  10. 函数lock_mode_stronger_or_eq 锁权限等级

    row代表lock HashTable的权限 column代表预加锁的权限    ulint lock_mode_stronger_or_eq( /*=====================*/ e ...