<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 전환//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{display:block; 위치:절대; 왼쪽:0; 상단:0} <br>img{너비:480px; 높이:320px; 테두리: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>}), switchSpeed); <br></script> <br></body> <br></html> <br><br> </div>效果预览:http://quchen.cau.edu.cn/jsDev/gradien.html