基于jquery插件實現(xiàn)常見的幻燈片效果
更新時間：2013年11月01日 17:00:35 作者：
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果
在網(wǎng)站中使用幻燈片效果的目前很普遍，如何實現(xiàn)，自己經(jīng)過一番研究，本以為很復(fù)雜，想不到卻很簡單。有現(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="標(biāo)題一" /></a>
<a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="標(biāo)題二" /></a>
<a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="標(biāo)題三" /></a>
<a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="標(biāo)題四" /></a>
<a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="標(biāo)題五" /></a>
<a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="標(biāo)題六" /></a>
</div>
js代碼：
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //設(shè)置切換方向為向下 [默認(rèn)向左切換]
intervalTime:8, //設(shè)置間隔時間為8秒 [默認(rèn)為5秒]
mouseEvent:"mouseover", //設(shè)置鼠標(biāo)事件為“鼠標(biāo)滑過切換” [默認(rèn)鼠標(biāo)點擊時切換]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設(shè)置標(biāo)題文字大小為14px，顏色：#FF0000
});
})
設(shè)置圖片大小的CSS
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最終效果圖
使用jquery.KinSlideshow.js就可以很輕松的實現(xiàn)幻燈片效果
htm代碼：
復(fù)制代碼 代碼如下:
<div id="focusNews" style="visibility:hidden;" class="ifocus" >
<a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="標(biāo)題一" /></a>
<a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="標(biāo)題二" /></a>
<a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="標(biāo)題三" /></a>
<a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="標(biāo)題四" /></a>
<a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="標(biāo)題五" /></a>
<a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="標(biāo)題六" /></a>
</div>
js代碼：
復(fù)制代碼 代碼如下:
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //設(shè)置切換方向為向下 [默認(rèn)向左切換]
intervalTime:8, //設(shè)置間隔時間為8秒 [默認(rèn)為5秒]
mouseEvent:"mouseover", //設(shè)置鼠標(biāo)事件為“鼠標(biāo)滑過切換” [默認(rèn)鼠標(biāo)點擊時切換]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //設(shè)置標(biāo)題文字大小為14px，顏色：#FF0000
});
})
設(shè)置圖片大小的CSS
復(fù)制代碼 代碼如下:
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最終效果圖
相關(guān)文章
JSON一種簡單的數(shù)據(jù)格式，比xml更輕巧，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包，下面為大家詳細(xì)介紹下js中的json對象2014-10-10
javascript使用isNaN()函數(shù)判斷變量是否為數(shù)字
javascript中判斷變量是否為數(shù)字的方法，這里主要介紹javascript里的 isNaN() 函數(shù)，具體使用如下，感興趣的朋友可以參考下2013-09-09
本文給大家簡單分享了一下個人項目中解決無刷新上傳文件的方法和示例，有需要的小伙伴可以參考下。2015-06-06
JavaScript 是一門基于原型的語言,它的繼承機(jī)制與傳統(tǒng)的基于類的面向?qū)ο缶幊逃兴煌?盡管 ES6 引入了 class 語法,但本質(zhì)上仍然是基于原型鏈的繼承,本文將詳細(xì)介紹 JavaScript 繼承的幾種實現(xiàn)方式,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JS實現(xiàn)的簡單下拉框聯(lián)動功能,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了ECMAScript中函數(shù)function類型的相關(guān)資料,需要的朋友可以參考下2015-06-06
JavaScript使用AOP編程思想實現(xiàn)監(jiān)聽HTTP請求
這篇文章主要為大家詳細(xì)介紹了如何在JavaScript使用AOP編程思想實現(xiàn)監(jiān)聽HTTP請求,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
javascript 異步頁面查詢實現(xiàn)代碼(asp.net)
異步頁面查詢，其實與自動完成時一樣的原理，根據(jù)用戶輸入的關(guān)鍵詞自動的與數(shù)據(jù)庫中的匹配，并顯示出來，提高用戶體驗，但主要搜索量大的話，增加服務(wù)器開銷。2010-05-05
這篇文章再次為大家詳細(xì)介紹了JavaScript簡單實現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了js中for in的缺陷，有需要的朋友可以參考一下2013-12-12