picChange 圖片切換特效的函數代碼_javascript技巧

可擴充的封裝方式，方便實現不同特效，源碼中給出了淡出效果(fade函數)，和移出效果(move函數)的實現方式。

一句話函數調用，實現圖片切換特效。
picChange(“圖片ul列表的id” , 切換圖片的方法引用 , 圖片切換時間 , 圖片移動方向);
用最簡單的調用方式和最簡潔的html代碼來實現這個常用的圖片轉場效果。
使用方法樣本：

html代碼：

複製代碼 代碼如下:

<div id=”win”>
<ul id=”picChange”>
<li><img src=”img/1.jpg” alt=”" /></li>
<li><img src=”img/1.jpg” alt=”" /></li>
……
</ul>
</div>

調用方式：

複製代碼 代碼如下:

//直接轉場效果
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

打包下載地址