经典实用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="data:images/1.jpg" width="650" height="250" alt="" /></a>
4. <a href="#2" class="a_bigImg"><img src="data:images/2.jpg" width="650" height="250" alt="" /></a>
5. <a href="#3" class="a_bigImg"><img src="data:images/3.jpg" width="650" height="250" alt="" /></a>
6. <a href="#4" class="a_bigImg"><img src="data: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样式的灵活性，不仅仅适用于图片相册，也适用于选项卡或文字类型的切换，
以上为此插件所有参数，基本满足了现在常见开发中遇到的平滑过渡效果，具体应用请参考以下示例。

---

下载