DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> picChange 圖片切換特效的函數代碼
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

打包下載地址

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved