SuperSlidev2.1 -- 大话主席
1. 标签切换 / 书签切换 / 默认效果
1.0-标签切换
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
触发方式[trigger]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
当前调用代码：jQuery(".slideTxtBox").slide({});
注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。
2. 焦点图 / 幻灯片
2.0-焦点图/幻灯片
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
触发方式[trigger]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
停止播放[mouseOverStop]:
前后按钮循环[pnLoop]:
当前调用代码：jQuery(".slideBox").slide({mainCell:".bd ul"});
注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。
3. 图片滚动-左
3.0-图片滚动-左
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
4. 图片滚动-上
4.0-图片滚动-上
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
5. 图片无缝滚动-左
5.0-图片无缝滚动-左
常用参数(切换看看)
效果[effect]:
leftMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true});
6. 图片无缝滚动-上
6.0-图片无缝滚动-上
常用参数(切换看看)
效果[effect]:
topMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true});
7. 文字滚动-左
7.0-文字滚动-左
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
8. 文字滚动-上
8.0-文字滚动-上
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
9. 文字无缝滚动-左
9.0-文字无缝滚动-左
常用参数(切换看看)
效果[effect]:
leftMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true});
10. 文字无缝滚动-上
10.0-文字无缝滚动-上
常用参数(切换看看)
效果[effect]:
topMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true});
常用参数(切换看看)
效果[effect]:
效果速度[delayTime]:
延迟触发[triggerTime]:
默认执行[defaultPlay]:
返回默认[returnDefault]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
当前调用代码：jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"});
13.0-手风琴
常用参数(切换看看)
效果[effect]:
效果速度[delayTime]:
触发方式[trigger]:
延迟触发[triggerTime]:
默认执行[defaultPlay]:
返回默认[returnDefault]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
当前调用代码：jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1});
T1. 其它基础效果
多行滚动基础示例
多列滚动基础示例
targetCell基础示例
SuperSlide组合应用基础示例
同一页面使用多个效果示例
双重Tab（slide组合）
Tab+无缝滚动（slide组合）
图片导航焦点图SuperSlidev2.1 -- 大话主席
1. 标签切换 / 书签切换 / 默认效果
1.0-标签切换
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
触发方式[trigger]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
当前调用代码：jQuery(".slideTxtBox").slide({});
注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。
2. 焦点图 / 幻灯片
2.0-焦点图/幻灯片
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
触发方式[trigger]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
停止播放[mouseOverStop]:
前后按钮循环[pnLoop]:
当前调用代码：jQuery(".slideBox").slide({mainCell:".bd ul"});
注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。
3. 图片滚动-左
3.0-图片滚动-左
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
4. 图片滚动-上
4.0-图片滚动-上
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
5. 图片无缝滚动-左
5.0-图片无缝滚动-左
常用参数(切换看看)
效果[effect]:
leftMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true});
6. 图片无缝滚动-上
6.0-图片无缝滚动-上
常用参数(切换看看)
效果[effect]:
topMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true});
7. 文字滚动-左
7.0-文字滚动-左
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
8. 文字滚动-上
8.0-文字滚动-上
常用参数(切换看看)
效果[effect]:
自动运行[autoPlay]:
滚动个数[scroll]:
可视个数[vis]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
效果速度[delayTime]:
<option value="
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});
注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
9. 文字无缝滚动-左
9.0-文字无缝滚动-左
常用参数(切换看看)
效果[effect]:
leftMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true});
10. 文字无缝滚动-上
10.0-文字无缝滚动-上
常用参数(切换看看)
效果[effect]:
topMarquee
可视个数[vis]:
运行速度[interTime]:
默认反方向运动[opp]:
前后按钮循环[pnLoop]:
触发方式[trigger]:
停止播放[mouseOverStop]:
当前调用代码：jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true});
常用参数(切换看看)
效果[effect]:
效果速度[delayTime]:
延迟触发[triggerTime]:
默认执行[defaultPlay]:
返回默认[returnDefault]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
当前调用代码：jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"});
13.0-手风琴
常用参数(切换看看)
效果[effect]:
效果速度[delayTime]:
触发方式[trigger]:
延迟触发[triggerTime]:
默认执行[defaultPlay]:
返回默认[returnDefault]:
缓动效果[easing]:
easeOutCirc
easeInQuint
easeInBack
easeOutBounce
easeOutElastic
当前调用代码：jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1});
T1. 其它基础效果
多行滚动基础示例
多列滚动基础示例
targetCell基础示例
SuperSlide组合应用基础示例
同一页面使用多个效果示例
双重Tab（slide组合）
Tab+无缝滚动（slide组合）
图片导航焦点图做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条，让其不能滚动，这样用户体验会好很多，当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。
一、去除滚动条方法给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性样式中需要对IE6、7及其它浏览器用hack辨别，这是因为当页面拉到下面时如果html或body被overflow:hidden，透明弹层下面的页面就会被部分正常隐藏，通过透明看到的一片的灰度，具体颜色跟平台及用户设置背景色有关。body或html去掉滚动条后，页面会有一个滚动条宽度/2的跳动！这个跳动对用户体验来十分不好，因此给body添加一下右padding，大小为滚动条的宽度。windows平台下滚动条的宽度为17px，linux平台下不同滚动器滚动条宽度不一致，可以用相关代码计算出滚动条的宽度，以下以windows平台为例。相关代码：
document.documentElement.style.cssText = &overflow:+overflow:_overflow:&;document.body.style.cssText = &overflow:+overflow:_overflow:padding:0 17px 0 0;&;
以上代码不考虑html或body是否有内联样式 ，如果html或body有内联样式则需要累加，否则会清空原有样式。
二、去除隐患其它方法滚动页面(防止误操作)隐藏滚动条后，用鼠标滚轮滚动页面确实不会动了，以为这就ok了，不是&键盘快捷键也可以操作浏览器的一些操作，与滚动页面相关的，比如：上下按键、翻页按键等。针对键盘快捷键，需要取消他们的默认操作。
三、添加弹出层样式给body添加全局样式(兼容IE6)
height:100%;
给弹层添加滚动样式overflow-y:width: 100%;height: 100%;left:0;_padding:0 17px 0 0; & & &//IE6bug，子元素绝对定位后对于父元素的padding依然有效
阅读(...) 评论()分类目录归档：SuperSlide常见问题
导航下拉菜单被遮住或显示不全问题所在和解决办法 导航下拉菜单被banner遮住/ &
在同一个页面使用多个相同或不同的效果其实很简单，直接把“基础效果”拼起来就可以了 &
当我们使用滚动效果，例如：left、leftLoop、top、topLoop、l &
其实不是ecshop与SuperSlide冲突，而是ecshop与jQuery冲 &
我们知道，html的执行顺序是从上而下的，对js的执行也是一样的。所以做好的做法 &
经验证确实存在问题，我们先看代码： [code lang="html"] &#038;lt &}