基于jquery插件實現(xiàn)常見的幻燈片效果
更新時間：2013年11月01日 17:00:35 作者：
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果
在網(wǎng)站中使用幻燈片效果的目前很普遍，如何實現(xiàn)，自己經(jīng)過一番研究，本以為很復雜，想不到卻很簡單。有現(xiàn)成的jquery插件jquery.KinSlideshow.js。
使用jquery.KinSlideshow.js就可以很輕松的實現(xiàn)幻燈片效果
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", //設(shè)置切換方向為向下 [默認向左切換]
intervalTime:8, //設(shè)置間隔時間為8秒 [默認為5秒]
mouseEvent:"mouseover", //設(shè)置鼠標事件為“鼠標滑過切換” [默認鼠標點擊時切換]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設(shè)置標題文字大小為14px，顏色：#FF0000
});
})
設(shè)置圖片大小的CSS
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最終效果圖
使用jquery.KinSlideshow.js就可以很輕松的實現(xiàn)幻燈片效果
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", //設(shè)置切換方向為向下 [默認向左切換]
intervalTime:8, //設(shè)置間隔時間為8秒 [默認為5秒]
mouseEvent:"mouseover", //設(shè)置鼠標事件為“鼠標滑過切換” [默認鼠標點擊時切換]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設(shè)置標題文字大小為14px，顏色：#FF0000
});
})
設(shè)置圖片大小的CSS
復制代碼 代碼如下:
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最終效果圖
相關(guān)文章
javascript數(shù)據(jù)類型中的一些小知識點（推薦）
這篇文章主要介紹了javascript數(shù)據(jù)類型中的一些小知識點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
JavaScript實現(xiàn)星座查詢功能 附詳細代碼
最近小編在做一個項目，其中涉及到一個模塊關(guān)于星座查詢功能，即在文本框中輸入一個生日值，點擊按鈕可以得到對應的星座，怎么實現(xiàn)這個需求呢？下面小編通過示例代碼給大家介紹下，需要的朋友參考下吧2021-11-11
本文主要JS中對數(shù)組元素進行增刪改移的方法，用表格的形式進行整理，方便閱讀，具有很好的參考價值，下面就跟小編一起來看下吧2016-12-12
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應用場景簡述
隨著web2.0的彪悍發(fā)展，以及瀏覽器端所承載的工作越來越大（在不是很影響性能的情況下，開發(fā)者都習慣把能用瀏覽器做的事兒都讓瀏覽器做，以減輕服務(wù)器的壓力和帶寬費用等）。2010-04-04
js中火星坐標、百度坐標、WGS84坐標轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標、百度坐標、WGS84坐標轉(zhuǎn)換實現(xiàn)方法,涉及JavaScript數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
Bootstrap前端開發(fā)案例二，這篇文章能夠幫助大家更還好的進行前端開發(fā)Bootstrap，相信大家會愛上Bootstrap2016-06-06
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來看看下面文章詳細內(nèi)容吧2021-12-12
這篇文章主要介紹了javascript設(shè)計模式之策略模式學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
實現(xiàn)JavaScript中數(shù)據(jù)響應的方法總結(jié)
JavaScript 數(shù)據(jù)響應是一種重要的前端開發(fā)概念,是指在應用程序中的數(shù)據(jù)發(fā)生變化時,能夠自動更新與這些數(shù)據(jù)相關(guān)的用戶界面（UI）部分的能力,本文我們來總結(jié)一下目前可以簡單實現(xiàn) JavaScript 中的數(shù)據(jù)響應的方法,需要的朋友可以參考下2023-09-09