欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

很常用的一款jQuery soChange幻灯片

程序员文章站 2022-03-28 17:01:59
...

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样式的灵活性,不仅仅适用于图片相册,也适用于选项卡或文字类型的切换,
以上为此插件所有参数,基本满足了现在常见开发中遇到的平滑过渡效果,具体应用请参考以下示例。