1. 首页
  2. 第三方插件
  3. SuperSlide滚动插件

SuperSlide滚动插件

全部参数 版本号：2.1.2

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide，还可以多个SuperSlide组合创造更多效果（兼容包括ie6的绝大部分浏览器）。
参数 默认值 说明
type
效果类型		 slide 可选 slide 或 menu，引入 type:"menu" 专门处理菜单/导航效果
defaultPlay
默认执行效果		 true 第一次运行是否执行效果，常用于导航/菜单
returnDefault
返回默认状态		 false 鼠标移出容器，是否返回默认状态，常用于导航/菜单
mouseOverStop true 鼠标移到容器层（无缝滚动容器 mainCell ）是否停止播放
playStateCell ".playState" 播放/暂停状态按钮，点击后会增加/删除 pauseState 类名用于控制样色。
switchLoad
内容切换加载		 null 暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如 switchLoad: "_src"
[v2.1] 修复当 scroll>1 时，switchLoad无效的bug。
easing
缓动效果		 "swing" [v2.1]更改默认效果为 swing，使效果更流畅
startFun
切换开始时执行函数		 null 每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 startFun:function(i, c){ }； 其中 i 为当前分页，c 为总页数
[v2.1]增加传递参数：startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，这样简写就方便了。
例如 jQuery(".slideBox").slide({ startFun:function( i,c,s ){ s.show() } }); 这里的 s.show() 相当于 jQuery(".slideBox").show()
endFun
切换结束时执行函数		 null 每次切换效果结束时执行函数，用法和 startFun 一致
triggerTime 150 毫秒，titCell 触发时间，默认150毫秒延迟，以防重复执行效果。若为0即鼠标移过 titCell 立刻执行效果
targetCell
切换元素对象		 null 处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和 titCell、mainCell 同时使用。只支持fade效果。
[v2.1] 增加支持 slideDown 效果。
pageStateCell
分页状态对象		 ".pageState" 用于显示分页状态，例如：2/3
pnLoop true 前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加 prevStop 和 nextStop类名控制样色
opp
默认反方向运动		 false 例如 effect: "leftMarquee" 然后设置 opp: true，则效果为右滚动。常用于leftMarquee/topMarquee
autoPage
自动分页		 false [v1.2] 需结合titCell使用，若为true，则titCell为导航元素的包裹层对象。ps：scroll>1时，记得设置autoPage:true，否则分页错误。
[v2.1] 支持自定义分页html，$为数字替换位置。例如 autoPage:"<li><a>$</a></li>"，如果不想输出数字：autoPage:"<li><a></a></li>"。
titCell
导航元素对象		 ".hd li" 鼠标的触发元素对象
mainCell
滚动层容器		 ".bd" 切换元素的包裹层对象
effect
动画效果		 "fade" [v1.0] fade 渐显；top 上滚动；left 左滚动；topLoop 上循环滚动； leftLoop 左循环滚动；topMarquee 上无缝循环滚动；leftMarquee 左无缝循环滚动；
[v2.0] fold 淡入淡出
[v2.1] slideDown 下拉效果
autoPlay false 自动运行
interTime
自动运行间隔		 2500 毫秒，当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。
delayTime
持续时间		 500 毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）。
trigger "mouseover" titCell触发方式：mouseover 鼠标移过触发；click 鼠标点击触发；
scroll 1 每次滚动个数。
vis
滚动容器内可视范围个数		 1 visible缩写，mainCell 的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。
[v2.1.2]增加参数设置 vis:"auto"，解决左滚动自适应窗口宽度问题。适应情况：vis:"auto", scroll:1, effect:"left|leftLoop"（注：此为临时解决方案，日后版本可能变动）
prevCell ".prev" 前一个/页按钮对象。
nextCell ".next" 后一个/页按钮对象。
defaultIndex
位置索引		 0 默认的当前位置索引。0是第一个；defaultIndex: 1 时，相当于从第2个开始执行
titOnClassName "on" 当前 titCell 位置自动增加的class名称

如何使用

  1. 因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide

    1. <head>
    2. <script type="text/javascript" src="../jquery.min.js"></script>
    3. <script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
    4. </head>

  2. 编写HTML，其中".hd"里面包含ul，".bd"里面包含ul

    1. <div class="super-slide">
    2. <div class="hd">
    3. <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    4. </div>
    5. <div class="bd">
    6. <ul>
    7. <li><a href="pages/SuperSlide.html" target="_blank">SuperSlide超级滚动插件</a></li>
    8. ...
    9. </ul>
    10. <ul>
    11. <li><a href="pages/SuperSlide.html" target="_blank">名师教作文：３妙招巧写高分</a></li>
    12. ...
    13. </ul>
    14. <ul>
    15. <li><a href="pages/SuperSlide.html" target="_blank">澳大利亚八大名校招生说明会</a></li>
    16. ...
    17. </ul>
    18. </div>
    19. </div>

  3. 编写CSS，可定义自己的风格

    1. .super-slide{ width:450px; border:1px solid #ddd; text-align:left;}
    2. .super-slide .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative;}
    3. .super-slide .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;}
    4. .super-slide .hd ul li{ float:left; padding:0 15px; cursor:pointer;}
    5. .super-slide .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff;}
    6. .super-slide .bd ul{ padding:15px; zoom:1;}
    7. .super-slide .bd li{ height:24px; line-height:24px;}
    8. .super-slide .bd li .date{ float:right; color:#999;}

  4. 编写JS调用

    1. $("#tx_slide").slide({
    2. titCell: ".hd ul",//头部标签，如下面示例中的分页和上一条下一条等内容
    3. mainCell: ".bd ul",//要滚动内容的容器
    4. autoPage: true,//自动分页
    5. effect: "top",//滚动效果为向上
    6. autoPlay: true,//自动滚动
    7. vis: 5,//可视元素为5个
    8. trigger: "click" //单击滚动
    9. });

查看调用方式及其对应的显示效果，你可以