在網站中使用幻燈片效果的目前很普遍，如何實現，自己經過一番研究，本以為很復雜，想不到卻很簡單。有現成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很輕松的實現幻燈片效果 htm代碼： ~~~ <div id="focusNews" style="visibility:hidden;" class="ifocus" > <a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="標題一" /></a> <a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="標題二" /></a> <a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="標題三" /></a> <a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="標題四" /></a> <a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="標題五" /></a> <a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="標題六" /></a> </div> ~~~ js代碼： ~~~ $(function () { $("#focusNews").KinSlideshow({ // moveStyle:"down", //設置切換方向為向下 [默認向左切換] intervalTime:8, //設置間隔時間為8秒 [默認為5秒] mouseEvent:"mouseover", //設置鼠標事件為“鼠標滑過切換” [默認鼠標點擊時切換] titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設置標題文字大小為14px，顏色：#FF0000 }); }) ~~~ 設置圖片大小的CSS ~~~ .ifocus{width:400px;height:300px;visibility:hidden;} .ifocus img{width:700px;height:400px; } ~~~ 最終效果圖