js實(shí)現(xiàn)索引圖片切換效果

更新時(shí)間：2015年11月21日 14:15:50 投稿：lijiao

這篇文章主要介紹了js實(shí)現(xiàn)索引圖片切換效果的代碼，特別炫酷的效果，推薦給大家，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了js實(shí)現(xiàn)索引圖片切換效果的代碼。分享給大家供大家參考。具體如下：
運(yù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實(shí)現(xiàn)索引圖片切換效果的主要代碼，希望對(duì)大家動(dòng)手實(shí)現(xiàn)圖片切換效果。

您可能感興趣的文章:

相關(guān)文章

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