基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果；
但我在使用fadeIn淡入时却无效果，最后只能使用fadeTo实现，求大神指教
HTML：
<!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" /> <title>一个轮播</title> <style> #scrollPlay{ width: 730px; height: 336px; /*overflow: hidden;*/ } #pre{ position: absolute; margin-top: 150px; width:30px; height: 30px; background: #000; color:#fff; opacity: 0.7; text-align: center; line-height: 30px; font-size: 20px; z-index: 10; } img{ opacity: 0; position: absolute; } #next{ position: absolute; margin-left:700px; margin-top: 150px; width:30px; height: 30px; background: #000; color:#fff; opacity: 0.7; text-align: center; line-height: 30px; font-size: 20px; z-index: 10; } span{ display: block; width: 15px; height: 15px; float: left; border: 1px solid #fff; } #buttons{ position: absolute; background: #000; margin-top: 300px; margin-left: 300px; z-index: 10; } .onactive{ background: green; } </style> <script src='jquery.js'></script> <script src='index.js'></script> </head> <body> <div id='scrollPlay'> <div id='buttons'> <span index = 0 class='onactive'></span> <span index = 1></span> <span index = 2></span> <span index = 3></span> <span index = 4></span> </div> <div id='pre'><</div> <div id='next'>></div> <img src='images/1.jpg' alt='pics' style='opacity:1'> <img src='images/2.jpg' alt='pics'> <img src='images/3.jpg' alt='pics'> <img src='images/4.jpg' alt='pics'> <img src='images/5.jpg' alt='pics'> </div> </body> </html>