picChange 圖片切換特效的函數(shù)代碼
更新時(shí)間：2010年05月06日 10:08:29 作者：
picChange圖片切換特效的封裝函數(shù)，能夠根據(jù)圖片html代碼自動(dòng)生成右下角的數(shù)字導(dǎo)航按鈕。
可擴(kuò)展的封裝方式，方便實(shí)現(xiàn)不同特效，源碼中給出了淡出效果(fade函數(shù))，和移出效果(move函數(shù))的實(shí)現(xiàn)方式。
一句話函數(shù)調(diào)用，實(shí)現(xiàn)圖片切換特效。
picChange(“圖片ul列表的id” , 切換圖片的方法引用 , 圖片切換時(shí)間 , 圖片移動(dòng)方向);
用最簡(jiǎn)單的調(diào)用方式和最簡(jiǎn)潔的html代碼來實(shí)現(xiàn)這個(gè)常用的圖片切換效果。
使用方法示例：
html代碼：
復(fù)制代碼 代碼如下:
<div id=”win”>
<ul id=”picChange”>
<li><img src=”img/1.jpg” alt=”" /></li>
<li><img src=”img/1.jpg” alt=”" /></li>
……
</ul>
</div>
調(diào)用方式：
復(fù)制代碼 代碼如下:
//直接切換效果
picChange(“picChange”);
//淡出效果
picChange(“picChange”,fade,500);
//向上移出效果
picChange(“picChange”,move,500,”up”);
//向下移出效果
picChange(“picChange”,move,500,”down”);
//向左移出效果
picChange(“picChange”,move,500,”left”);
//向右移出效果
picChange(“picChange”,move,500,”right”);
看Demo猛擊這里：http://demo.jb51.net/js/picChange/index.html
打包下載地址
相關(guān)文章
彈出框只彈一次，看到網(wǎng)上也就寫的很多，可以直接使用的沒有幾個(gè)，下面與大家分享個(gè)修改之后的代碼，需要的朋友可以參考下2013-11-11
解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問題
下面小編就為大家?guī)硪黄鉀Qcanvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
JavaScript中for of和for in的區(qū)別詳解
對(duì)于初學(xué)者，我們或許只知道無論是for of還是for in他們都有一個(gè)功能那就是遍歷，至于具體的細(xì)節(jié)或許我們不是很清楚，那么接下來我們就來詳細(xì)的區(qū)分一下for of和for in他們之間的不同點(diǎn)和相同點(diǎn),需要的朋友可以參考下2023-06-06
在日常的TypeScript開發(fā)中,經(jīng)常需要遍歷對(duì)象的鍵來執(zhí)行各種操作,,在本文中,我們將深入研究這個(gè)問題,并提供幾種解決方案,以便在遍歷對(duì)象鍵時(shí)更安全、更靈活地操作,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
JavaScript中5個(gè)重要的Observer函數(shù)小結(jié)
瀏覽器為開發(fā)者提供了功能豐富的Observer,本文主要介紹了JavaScript中5個(gè)重要的Observer函數(shù)小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
本篇文章主要是對(duì)js中call與apply的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈担缓髮?duì)變量進(jìn)行賦值，稱為解構(gòu)。只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值，這種寫法屬于“模式匹配”。統(tǒng)稱起來就叫做“解構(gòu)賦值”。2021-05-05
實(shí)例分析js和C#中使用正則表達(dá)式匹配a標(biāo)簽
本文通過2個(gè)實(shí)例，對(duì)比分析了在js和c#中使用正則表達(dá)式匹配a標(biāo)簽的異同，小伙伴們自己參考下吧，有利于深刻理解正則表達(dá)式的使用。2014-11-11
JavaScript中校驗(yàn)銀行卡號(hào)的實(shí)現(xiàn)代碼
本文通過案例給大家介紹了js中校驗(yàn)銀行卡號(hào)的代碼，代碼小編測(cè)試過，可行。代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12