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

所有参数:

$(obj).soChange({
    thumbObj:null, //导航对象,默认为空
    btnPrev:null, //按钮上一个,默认为空
    btnNext:null, //按钮下一个。默认为空
    changeType:'fade',//切换方式,可选:fade,slide,默认为fade,1.6版新增方法,详见例3-定义对象切换方式为slide
    thumbNowClass:'now', //导航对象当前的class,默认为now
    thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象,默认为true,为false时,只有鼠标点击thumbObj才切换对象
    slideTime:1000, //平滑过渡时间,默认为1000ms,为0或负值时,忽略changeType方式,切换效果为直接显示隐藏
    autoChange:true, //是否自动切换,默认为true
    clickFalse:true,//导航对象点击是否链接无效,默认是return false链接无效,当thumbOverEvent为false时,此项必须为true,否则鼠标点击事件冲突
    overStop:true,//鼠标经过切换对象时,是否停止切换,并于鼠标离开后重启自动切换,前提是已开启自动切换
    changeTime:5000, //对象自动切换时间,默认为5000ms,即5秒
    delayTime:300 //鼠标经过时对象切换迟滞时间,推荐值为300ms
    callback:function(prev,now){} //切换返回函数,内部提供2个参数:切换前 index值 prev,当前 index值 now1.6版新增方法
});

soChange 即 simple object change ,对象切换插件,
充分发挥css样式的灵活性,不仅仅适用于图片相册,也适用于选项卡或文字类型的切换,
以上为此插件所有参数,基本满足了现在常见开发中遇到的平滑过渡效果,具体应用请参考以下示例。


注:图片右上方的小箭头图标考虑美观用了透明的png32图片,在ie6下不透明。

作者:不羁虫
2011.10.10

1- 默认最简易模式

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

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

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

2- 带前后按钮

$('#change_2 .a_bigImg').soChange({
btnPrev:'#change_2 .a_last', // 按钮,上一个
btnNext:'#change_2 .a_next' // 按钮,下一个
});

  • 1
  • 2
  • 3
  • 4

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

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

  • 1
  • 2
  • 3
  • 4

3- 定义对象切换方式为slide

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

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

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

  • 1
  • 2
  • 3
  • 4

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

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

6- 带导航图标及按钮

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

7- 不自动切换,并返回事件

$('#change_5 .a_bigImg').soChange({
thumbObj:'#change_5 .ul_change_a1 img',
//导航图标,选择器直接指向图标对象
btnPrev:'#change_5 .a_last',
btnNext:'#change_5 .a_next',
autoChange:false //自动切换为 false,默认为true
callback:function(prev,now){
    alert('上一张图片index值:'+prev+',当前图片index值:'+now);
} //返回事件
});

标题1

内容1111111 11111内容111111 111111内容11111 1111111内容1111111 11111

标题2

内容2222222 22222内容222222 222222内容22222 2222222内容2222222 22222

标题3

内容3333333 33333内容333333 333333内容33333 3333333内容3333333 33333

标题4

内容4444444 44444内容444444 444444内容44444 4444444内容4444444 44444

8- 在选项卡上的应用

$('#change_6 div').soChange({
thumbObj:'#change_6 h3',//导航对象指向标题h3
slideTime:0,
thumbOverEvent:false,//关闭鼠标经过切换的动作
autoChange:false
});

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