<div class="codetitle"> <span><a style="CURSOR: pointer" data="11317" class="copybut" id="copybut11317" onclick="doCopy('code11317')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code11317"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><meta name="author" content="CAU CS101 のナンクル" /> <br><title>jQuery图片渐变切换</title> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <br><style type="text/css"> <br>ul{位置:相対;} <br>ul li{表示:ブロック;位置:絶対;左:0;トップ:0} <br>img{幅:480px;高さ:320ピクセル; border:5px ソリッド #ccc} <br></style> <br></head> <br> <br><ul> <br><li><img src="http://down.fpwap.com/UploadFiles/sjbz/2010/6/2010615222757.jpg" /></li> <br><li><img src="http://img5.cache.netease.com/m/app/201108/31/953DDLJL.jpg" /></li> <br><li><img src="http://i-imgp.fetionpic.com/fphoto/photo1/M00/41/83/rBUyIVHfdvC9LAM6AAC873sDEoo981.jpg" /></li> <br><li><img src="http://img.bimg.126.net/photo/L0py2I9-0qIAd_Keov5GhQ==/1710804908448128265.jpg" /></li> <br> </ul> <br> </div> <br> <br>var switchSpeed = 1000; //画像切替え時間<br>var fadeSpeed = 1500; //渐变時間 <br>setInterval(function(){ <br>$('img').last().fadeOut(fadeSpeed, function(){ <br>$(this).show().parent() .prependTo($('ul')); <br>}); <br></script> <br></body> <br></html> <br><br> 效果预览:http://quchen.cau.edu.cn/jsDev/gradien.html