基於jquery外掛實現常見的幻燈片效果_javascript技巧

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

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

htm代碼：

複製代碼 程式碼如下:

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; >.ifocus img{width:700px;height:400px; }

最終效果圖