在網站中使用幻燈片效果的目前很普遍，如何實現，自己經過一番研究，本以為很復雜，想不到卻很簡單。有現成的jquery插件jquery.KinSlideshow.js。

使用jquery.KinSlideshow.js就可以很輕松的實現幻燈片效果

htm代碼：

復制代碼 代碼如下:

<div >
<a href="test.aspx" target="_blank"><img src="images/1.jpg" /></a>
<a href="test.aspx" target="_blank"><img src="images/2.jpg" /></a>
<a href="test.aspx" target="_blank"><img src="images/3.jpg" /></a>
<a href="test.aspx" target="_blank"><img src="images/4.jpg" /></a>
<a href="test.aspx" target="_blank"><img src="images/5.jpg" /></a>
<a href="test.aspx" target="_blank"><img src="images/6.jpg" /></a>
</div>

復制代碼 代碼如下:

$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //設置切換方向為向下 [默認向左切換]
intervalTime:8, //設置間隔時間為8秒 [默認為5秒]
mouseEvent:"mouseover", //設置鼠標事件為“鼠標滑過切換” [默認鼠標點擊時切換]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設置標題文字大小為14px，顏色：#FF0000
});

})

復制代碼 代碼如下:

.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }