添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 焦点图 >

SuperSlide网页常用特效应用

时间:2014-02-25      来源:互联网     
特效说明:
SuperSlide 插件致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!还可以多个SuperSlide组合创造更多效果哦~(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
参数 版本 默认值 说明
type 2.1 slide 效果类型,可选"slide"||"menu",引入type:"menu"专门处理菜单/导航效果
defaultPlay 2.1 true 默认是否执行效果(第一次运行是否执行效果)常用于导航/菜单
returnDefault 2.1 false 鼠标移出容器,是否返回默认状态,常用于导航/菜单
mouseOverStop 2.1 true 鼠标移到容器层(无缝滚动是mainCell)是否停止播放
playStateCell 2.1 ".playState" 播放/暂停状态按钮,点击后会增加/删除"pauseState"类名用于控制样色。
switchLoad 2.0 > 2.1 null 内容切换加载,暂时只支持图片,必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称,例如switchLoad:"_src"
[v2.1] 修复当scroll>1时,switchLoad无效的bug。
easing 2.0 > 2.1 "swing" 缓动效果;
[v2.1]更改默认效果为“swing”,使效果更流畅
startFun 2.0 > 2.1 null 每次切换效果开始时执行函数,用于处理特殊情况或创建更多效果。用法 satrtFun: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 2.0 > 2.1 null 每次切换效果结束时执行函数,用法和startFun一致
triggerTime 2.0 150 毫秒,titCell触发时间,默认150毫秒延迟,以防重复执行效果。若为0即鼠标移过titCell立刻执行效果
targetCell 2.0 > 2.1 null 切换元素对象,处理内容切换元素非包裹状态下等情况,实现更多效果,处理更多情况,能和titCell、mainCell同时使用。只支持fade效果。
[v2.1] 增加支持slideDown效果。
pageStateCell 2.0 ".pageState" 分页状态对象,用于显示分页状态,例如:2/3
pnLoop 2.0 true 前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效,同时增加prevStop/nextStop类名控制样色
opp 2.0 false 默认反方向运动,例如 effect:"leftMarquee" 然后设置 opp:true,则效果为右滚动。常用于leftMarquee/topMarquee
autoPage 1.2 > 2.1 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 1.0 ".hd li" 导航元素对象(鼠标的触发元素对象)
mainCell 1.0 ".bd" 切换元素的包裹层对象
effect 1.0 > 2.0 >2.1 "fade" 动画效果
[v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉效果
autoPlay 1.0 false 自动运行
interTime 1.0 2500 毫秒;自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时,相当于运行速度。
delayTime 1.0 500 毫秒;切换效果持续时间(一次切换效果执行所用的时间长度)。
trigger 1.0 "mouseover" titCell触发方式 || mouseover:鼠标移过触发;|| click:鼠标点击触发;
scroll 1.0 1 每次滚动个数。
vis 1.0 1 visible缩写,mainCell的可视范围个数,当实际内容个数少于可视个数的时候,不执行SuperSlide效果。
prevCell 1.0 ".prev" 前一个/页按钮对象。
nextCell 1.0 ".next" 后一个/页按钮对象。
defaultIndex 1.0 0 默认的当前位置索引。0是第一个; defaultIndex:1 时,相当于从第2个开始执行
titOnClassName 1.0 "on" 当前titCell位置自动增加的class名称
相关特效
  • jQuery响应式网格列表变化左右滑动焦点图特效

    jQuery响应式网格列表变化左右滑动焦点图特效

    一款jQuery响应式网格列表变化左右滑动焦点图特效下载,该特效基于Bootstrap框架制作,是一款可以将指定的网格内容扩展为旋转木马效果,通过左右按钮切换播放。……
    2016-08-16
  • 一款基于TweenMax.js焦点图特效

    一款基于TweenMax.js焦点图特效

    一款一款基于TweenMax.js焦点图网页特效,不规则图片透明渐变切换图片JS代码。酷炫网站焦点图代码素材。……
    2015-10-15
  • jQuery响应式自适应宽屏焦点图特效

    jQuery响应式自适应宽屏焦点图特效

    一款jQuery响应式自适应宽屏焦点图特效,该JS特效代码是一款mobilyslider.js插件实现覆盖滚动切换图片效果的焦点图,带左右按钮和索引小按钮,自动播放,点击左右按钮轮播,鼠标划过停……
    2015-03-18
  • jQuery渐变切换焦点图代码

    jQuery渐变切换焦点图代码

    一款jQuery渐变切换焦点图代码网页特效免费下载,该JS特下代码是一款鼠标移到蓝色按钮自动渐变切换的幻灯片图片特效。……
    2015-03-18
  • 搜狗输入法jQuery旋转焦点图

    搜狗输入法jQuery旋转焦点图

    一款搜狗输入法jQuery旋转焦点图网页特效下载,基于jQuery编写,搜狗输入法官方网站3D立体旋转jquery焦点图JS代码。……
    2015-03-04
  • jQuery左右箭头按钮自动轮播焦点图

    jQuery左右箭头按钮自动轮播焦点图

    一款jQuery左右箭头按钮自动轮播焦点图网页特效,带左右按钮,自动轮播及点击按钮切换焦点图。……
    2015-01-22
  • 5屏大气jQuery滑动门焦点图特效

    5屏大气jQuery滑动门焦点图特效

    5屏大气jQuery滑动门焦点图网页特效,手拉风琴动画切换焦点图特效,可设置自动切换。……
    2015-01-21
  • jQuery手机触屏左右滑动切换焦点图特效代码

    jQuery手机触屏左右滑动切换焦点图特效代码

    一款jQuery手机触屏左右滑动切换焦点图特效代码免费下载,该焦点图特效支持触屏滑动切换大图,做微信网站或手机方面的webapp网页必备素材代码,有需要的朋友参考下。……
    2015-01-15
  • CSS3随机动态图标选项卡菜单

    CSS3随机动态图标选项卡菜单

    一款CSS3随机动态图标选项卡菜单网页特效,鼠标悬停选项卡菜单文字向右漂移,同时左侧出现图标,单击鼠标左键,选项卡更改为当前栏目对应内容。……
    2015-01-15
  • CSS3动画缩放切换效果焦点图特效

    CSS3动画缩放切换效果焦点图特效

    一款CSS3动画缩放切换效果焦点图网页特效,基于css3制作的图片缩放切换特效,带左右按钮,自动轮播及点击左右按钮动画缩放切换JS焦点图代码。……
    2015-01-09


最新更新特效

设计分享

web前端视频教程