js實現(xiàn)索引圖片切換效果
更新時間：2015年11月21日 14:15:50 投稿：lijiao
這篇文章主要介紹了js實現(xiàn)索引圖片切換效果的代碼，特別炫酷的效果，推薦給大家，感興趣的小伙伴們可以參考一下
本文實例講述了js實現(xiàn)索引圖片切換效果的代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下
html代碼：
<div id="slideshowHolder">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>
css代碼：
.ft-prev, .ft-next {
background-color: #000;
padding: 0 10px;
color:#fff;
}
js代碼：
$(document).ready(function () {
$('#slideshowHolder').jqFancyTransitions({
effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 700, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: true, // prev and next navigation buttons
links: true // show images as links
});
});
以上就是js實現(xiàn)索引圖片切換效果的主要代碼，希望對大家動手實現(xiàn)圖片切換效果。
相關(guān)文章
本篇文章主要是對js日期對象兼容性的處理方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了Javascript動畫的實現(xiàn)原理淺析,本文用兩個實例來解釋Javascript動畫的實現(xiàn)原理,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript日期類型的一些用法介紹,本文講解了獲取某個月份的天數(shù)、獲取時區(qū)、計算運行時間、刪除cookie等用法,需要的朋友可以參考下2015-03-03
javascript htmlencode函數(shù)(ff兼容版) 主要是編輯器中反轉(zhuǎn)html代碼
非常不錯的htmlencode 方法，比用正則實現(xiàn)的更好，而且效率高，推薦使用第一種方法。2009-06-06
前端圖片懶加載(lazyload)的實現(xiàn)方法(提高用戶體驗)
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
當(dāng)我們發(fā)送郵件時，可以自定義郵件發(fā)送的時間，那么使用代碼是如何實現(xiàn)的呢？下面通過本篇文章給大家介紹使用純javascript實現(xiàn)自動發(fā)送郵件，感興趣的朋友可以參考下2015-10-10
微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例
這篇文章主要介紹了微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了H5實現(xiàn)仿flash效果的實現(xiàn)代碼的相關(guān)資料,希望通過本文能幫助到大家，實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
通過javascript設(shè)置css屬性的方法需要的朋友可以參考下。2009-12-12