可擴展的封裝方式,方便實現不同特效,源碼中給出了淡出效果(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
打包下載地址