基于jQuery的对象切换插件：soChange 1.5 (点击下载)

所有参数：

$(obj).soChange({
    thumbObj:null, //导航对象，默认为空
    botPrev:null, //按钮上一个，默认为空
    botNext:null, //按钮下一个。默认为空
    thumbNowClass:'now', //导航对象当前的class,默认为now
    thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象
    slideTime:1000, //对象平滑过渡持续时间，默认为1000ms
    autoChange:true, //是否自动切换，默认为true
    clickFalse:true,//导航对象如果有链接，点击是否链接无效，即是否返回return false，默认是return false链接无效，当thumbOverEvent为false时，此项必须为true，否则鼠标点击事件冲突
    overStop:true,//鼠标经过切换对象时，切换对象是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换，默认开启鼠标经过对象停止切换
    changeTime:5000, //对象自动切换时间，默认为5000ms，即5秒
    delayTime:300 //鼠标经过时对象切换迟滞时间，推荐值为300ms
});

实现对象切换的插件其实网上很多，
但是应用起来总是不够满意，不够简洁，不够实用，所以干脆自己写了一个，
本来取名为sGallery，即simpleGallery，
但感觉这个插件不仅仅是可以应用在幻灯相册上，确实应该称它为对象切换插件，
所以改了名称，simple object change ，简洁考虑直接就soChange，即如此改变，如此切换，
我也增加了一个选项卡切换的例子，相信你使用时会觉得它是如此方便和多样，
以上为此插件所有参数，从前端开发角度出发，充分利用css样式的灵活性，脚本调用方式简单，
基本满足了现在常见开发中遇到的平滑过渡效果，具体实际应用及代码参考以下的例子。

注：此插件大小为3k(min版为1.6k)，兼容全部主流浏览器，
图片右上方的小箭头图标考虑美观用了透明的png图片，在ie6下不透明，此和样式有关，请详知。

作者：不羁虫
2009.12.14

jquery 分享代码在线制作鼠标一键复制url路径功能与分享信息 jquery 制作鼠标点击描点a标签返回顶部 jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示

1- 默认最简易模式

$('#change_1 .a_bigImg img').soChange();

//最简易模式不带任何参数，即直接切换选择器选择的对象组，所有参数为默认：隔5秒自动切换，图片过渡效果持续1秒

//源对象为自动切换的一个数组，即其本身，非其父包装元素
//如要切换图片本身就以图片组为对象，
//如要切换层就以层组为对象

2- 带前后按钮

$('#change_2 .a_bigImg img').soChange({
botPrev:'#change_2 .a_last', // 按钮，上一个
botNext:'#change_2 .a_next' // 按钮，下一个
});

jquery 分享代码在线制作鼠标一键复制url路径功能与分享信息 jquery 制作鼠标点击描点a标签返回顶部 jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示
  • 1
  • 2
  • 3
  • 4

3- 使用数字导航切换及自定义当前状态数字的class

$('#change_3 .a_bigImg img').soChange({
thumbObj:'#change_3 .ul_change_a2 span',
//导航为数字形式，选择器指向包含数字的span对象
thumbNowClass:'on',
//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});

4- 切换对象为其他，这里为包含图片和标题的层

$('#change_32 div.changeDiv').soChange({
对象指向层，层内包含图片及标题
thumbObj:'#change_32 .ul_change_a2 span',
thumbNowClass:'on'
});

jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡 jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示 jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效 jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示
  • 1
  • 2
  • 3
  • 4

5- 关闭鼠标经过thumbObj切换事件，平滑过渡间歇时间为0

$('#change_33 .a_bigImg img').soChange({
thumbObj:'#change_33 .ul_change_a2 span',
thumbOverEvent:false,// 关闭鼠标经过thumbObj切换事件，只有点击thumbObj时才切换对象
thumbNowClass:'on',
slideTime:0//平滑过渡间歇为0，意味着直接切换
});

6- 带导航图标及按钮

$('#change_4 .a_bigImg img').soChange({
thumbObj:'#change_4 .ul_change_a1 img',
//导航图标，选择器直接指向图标对象
botPrev:'#change_4 .a_last',
botNext:'#change_4 .a_next'
});

7- 不自动切换

$('#change_5 .a_bigImg img').soChange({
thumbObj:'#change_5 .ul_change_a1 img',
//导航图标，选择器直接指向图标对象
botPrev:'#change_5 .a_last',
botNext:'#change_5 .a_next',
autoChange:false //自动切换为 false，默认为true
});

8- 在选项卡上的应用

$('#change_6 div').soChange({
thumbObj:'#change_6 h3',//导航对象指向标题h3
slideTime:0,
thumbOverEvent:false,
autoChange:false
});

注：这个和相册或者幻灯似乎相差比较远，但是其实原理相同，无非是鼠标触发一个，另一个发生改变，所以，应用时请开动脑筋，充分发挥css在页面特效中的作用