02/25
2017
前两天做的项目中使用了SuperSlide,做了个焦点图切换效果和图片向左滚动展示的效果。使用时参照官方demo做了些细微改动,现在我再把代码单独存一份,方便以后使用。
1.焦点图切换(通屏):
2.图片向左滚动:
SuperSlide的demo
04/3
2015
就是这样的效果,在好几个网站上看到过,于是扒了下来,做成了demo。demo下载
使用SuperSlide制作的页面左侧垂直的圆形导航
10/14
2014
已弃坑。我下面试的几次,都是自己对其示例进行了结构的简化,想要以后用着方便,事实证明这么做意义不大,该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。
用superslide做焦点图,其切换间隔太快,但是demo文档里又没有这个参数设置,于是去查看官网的参数文档,找到了interTime参数,如下:
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});
css里有些地方得改一下:
.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px; }/*这里设置居中*/ /*.slideBox .bd img 如无必要,不要设置width,否则可能导致图片变形*/ /*指示器默认是靠右的,可能会被右侧的漂浮广告挡住,给.slideBox .hd设置一个right值比较合适。*/
注意参数最后是不加分号的,加了报错。另附动画效果参数:
[v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉效果
Read More →