經典實用jQuery soChange幻燈片實例演示

soChange一款多很經典的幻燈片的jQuery插件。

實例預覽

引入文件

1. <link rel="stylesheet" type="text/css" media="all" href="style.css" />
2. <script type="text/javascript" src="jquery1.4.2.min.js"></script>
3. <script src="jquery.soChange-min.js" type="text/javascript"></script>

使用方法

1. <div class="eachBox">
2. <div class="changeBox_a1" id="change_1">
3. <a href="#1" class="a_bigImg"><img src="images/1.jpg" width="650" height="250" alt="" /></a>
4. <a href="#2" class="a_bigImg"><img src="images/2.jpg" width="650" height="250" alt="" /></a>
5. <a href="#3" class="a_bigImg"><img src="images/3.jpg" width="650" height="250" alt="" /></a>
6. <a href="#4" class="a_bigImg"><img src="images/4.jpg" width="650" height="250" alt="" /></a>
7. </div>
8. <div class="introArea">
9. <h2>1- 預設最簡易模式</h2>

1. //預設最簡易模式
2. $('#change_1 .a_bigImg').soChange();

soChange參數

1.  $(obj).soChange({
2.     thumbObj:null, //導航對象，預設為空
3.     botPrev:null, //按鈕上一個，預設為空
4.     botNext:null, //按鈕下一個。預設為空
5.     changeType:'fade',//切換方式，可選：fade,slide，預設為fade，1.6版新增方法，詳見例3-定義對象切換方式為slide
6.     thumbNowClass:'now', //導航對象當前的class,預設為now
7.     thumbOverEvent:true,//滑鼠經過thumbObj時是否切換對象，預設為true，為false時，只有滑鼠點擊thumbObj才切換對象
8.     slideTime:1000, //平滑過渡時間，預設為1000ms，為0或負值時，忽略changeType方式，切換效果為直接顯示隱藏
9.     autoChange:true, //是否自動切換，預設為true
10.     clickFalse:true,//導航對象點擊是否鏈接無效，預設是return false鏈接無效，當thumbOverEvent為false時，此項必須為true，否則滑鼠點擊事件衝突
11.     overStop:true,//滑鼠經過切換對象時，是否停止切換，並於滑鼠離開後重啟自動切換，前提是已開啟自動切換
12.     changeTime:5000, //對象自動切換時間，預設為5000ms，即5秒
13.     delayTime:300 //滑鼠經過時對象切換遲滯時間，推薦值為300ms
14. });

soChange 即 simple object change ，對象切換插件，
充分發揮css樣式的靈活性，不僅僅適用於圖片相冊，也適用於選項卡或文字類型的切換，
以上為此插件所有參數，基本滿足了現在常見開發中遇到的平滑過渡效果，具體應用請參考以下示例。