<!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. Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]：刘耀先-11061183,罗凡-11061174

    本次为我们两个人的第一次结对编程.从总体而言,我们对结对编程比单人编程略显不适应.但是经过一段时间的磨合,我们逐渐的习惯了这种编程方式. 1.  结对编程的优缺点 结对编程的优点: (1)       ...

  2. BZOJ 3992 [SDOI 2015] 序列统计 解题报告

    这个题最暴力的搞法就是这样的: 设 $Dp[i][j]$ 为前 $i$ 个数乘积为 $j$ 的方案数. 转移的话就不多说了哈... 当前复杂度 $O(nm^2)$ 注意到,$M$ 是个质数,就说明 $ ...

  3. [BZOJ 3774] 最优选择 【最小割】

    题目链接:BZOJ - 3774 题目分析 此题与“文理分科”那道题目有些类似.都是使用最小割来求解,先加上可能获得的权值,在减掉必须舍弃的权值(最小割). 文理分科是规定每个人和 S 连就是选文,和 ...

  4. IDEA如何打包可运行jar的一个问题。

    转自http://bglmmz.iteye.com/blog/2058785 背景: 有时候,我们会用IDEA来开发一些小工具,需要打成可运行的JAR包:或者某些项目不是WEB应用,纯粹是后台应用,发 ...

  5. 161. One Edit Distance

    题目: Given two strings S and T, determine if they are both one edit distance apart. 链接: http://leetco ...

  6. Shell编程学习---第五篇：Shell的输入和输出

    在shell脚本中,可以用几种不同的方式读入数据:可以使用标准输入—缺省为键盘,或 者指定一个文件作为输入.对于输出也是一样:如果不指定某个文件作为输出,标准输出总 是和终端屏幕相关联.如果所使用命令 ...

  7. 【HDOJ】4162 Shape Number

    循环串的最小表示法. /* */ #include <iostream> #include <string> #include <map> #include < ...

  8. mingw32 下编译 zlib

    cp win32/makefile.gcc makefile.gcc make -f makefile.gcc make install -f Makefile.gcc INCLUDE_PATH=/m ...

  9. Java开发所需架包官方下载

    1.连接MySQL数据库所需架包点击进入官网下载 2.连接Oracle数据库所需架包点击进入官网下载 3.JUnit测试所需架包点击进入官网下载或者点击进入官网下载 4.Struts所需架包点击进入官 ...

  10. hadoop面试时可能遇到的问题

    面试hadoop可能被问到的问题,你能回答出几个 ? 1.hadoop运行的原理? 2.mapreduce的原理? 3.HDFS存储的机制? 4.举一个简单的例子说明mapreduce是怎么来运行的 ...