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)圖片切換效果。
相關文章
老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)
大家都知道CSS樣式有三種類型：行內(nèi)樣式、內(nèi)部樣式和外部樣式，這篇文章主要介紹了javaScript獲取CSS樣式的方法(兼容各瀏覽器),需要的朋友可以參考下2018-09-09
微信JS-SDK實現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)
這篇文章主要介紹了微信JS-SDK實現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
JavaScript代碼因逗號不規(guī)范導致IE不兼容的問題
這篇文章主要介紹了JavaScript代碼因逗號不規(guī)范導致IE不兼容的問題的相關資料,需要的朋友可以參考下2016-02-02
javascript實現(xiàn)數(shù)組內(nèi)值索引隨機化及創(chuàng)建隨機數(shù)組的方法
這篇文章主要介紹了javascript實現(xiàn)數(shù)組內(nèi)值索引隨機化及創(chuàng)建隨機數(shù)組的方法,涉及javascript數(shù)組索引及隨機數(shù)的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果
這篇文章主要為大家詳細介紹了如何通過CSS、JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2024-01-01
JS把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要是對js中的Array操作進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript中一些特殊的字符運算的相關資料,需要的朋友可以參考下2017-08-08
今天在使用uni-app開發(fā)登錄頁面時遇到一個需求，需要禁用返回按鈕,下面這篇文章主要給大家介紹了關于uni-app禁用返回按鈕/返回鍵的具體實現(xiàn),需要的朋友可以參考下2022-11-11
微信小程序使用template標簽實現(xiàn)五星評分功能
這篇文章主要為大家詳細介紹了微信小程序使用template標簽實現(xiàn)五星評分功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11