<!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. 区域生长算法的一种C++实现

    区域生长算法是一种图像分割方法,能够将图像中具有相同特征的连通区域分割出来,同时保证较好的边缘信息. 区域生长算法的优点是简单,容易实现:但空间和时间复杂度较高,对分割图像要求较高,否则容易形成孔洞和 ...

  2. Oracle中的触发器

    创建触发器的语法: Create trigger 触发器的名字 after insert/update/delete/(select是没有触发器的) on 表名字 declare begin dbms ...

  3. BZOJ 3983 Takeover Wars 解题报告

    我猜了一个结论,能合并就合并,到了必须要敌对交易的时候才进行敌对交易. 然后合并的话,肯定是拿最大的两个去合并. 至于敌对交易,肯定是干掉对方最大的公司才是有意义的. 于是各种分类讨论...看代码好了 ...

  4. codeforces 390D Inna and Sweet Matrix

    几个小结论: 1.路径长度=i+j-1; 2.最简单的走法是先横走再竖着走或者先竖着走再横着走 #include<cstdio> #include<cstring> using ...

  5. 《暗黑世界GM管理后台系统》部署+功能说明

    原地址:http://blog.csdn.net/uxqclm/article/details/11969761 欢迎来到9秒:www.9miao.com 暗黑三国管理后台说明文档 (一)功能描述该后 ...

  6. POJ2201+RMQ

    /* RMQ */ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<algo ...

  7. CHANGE DEFAULT FTP PORT FOR VSFTP

    http://twincreations.co.uk/change-default-ftp-port-for-vsftp/ http://www.cnblogs.com/kuliuheng/p/320 ...

  8. 服务器部署_centos 安装jdk手记

    1. 下载jdk略. 2. 将jdk相关文件目录放到指定目录 (1) 创建jdk目录 /usr/java/jdk7 mkdir -p /usr/java/jdk7 (2) 解压缩jdk压缩包,并移动至 ...

  9. ANDROID_MARS学习笔记_S02_011_ANIMATION_LayoutAnimationController

    一.简介 二.代码1.xml(1)activity_main.xml <ListView android:id="@id/android:list" android:layo ...

  10. !! python 之半年总结

    http://blog.chinaunix.net/uid-26443921-id-3481357.html 半年前开始系统完整深入的了解学习 python 读书篇: <python 核心编程2 ...