幻灯片jquery.SuperSlide插件

本站郑重声明:jquery.SuperSlide插件著作版权归原作者大话主席所有。感觉不错可以支持下作者:http://www.superslide2.com/

H-ui幻灯片将从原来的unslider改为jquery.SuperSlide插件,原因:jquery.SuperSlide插件接口更加丰富,调用更加灵活,能满足大部分的图片播放效果。更重要的一点是支持复用(一个页面多出使用)。

本插件建议用于PC端网页,移动端建议使用TouchSlide插件。

引入jQuery 和 jquery.SuperSlide.js

<script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>

4.4.1 焦点图效果(自动播放,圆点控制)

HTML代码

<div id="slider-3">
<div class="slider">
<div class="bd">
<ul>
<li><a href="#" target="_blank"><img src="images/banner-1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/banner-1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/banner-1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/banner-1.jpg" ></a></li>
</ul>
</div>
<ol class="hd cl dots">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>

CSS代码

.slider{position:relative;text-align:center; margin:0 auto;z-index:1}
.slider .bd,.slider .bd li,.slider .bd img{width:960px; height:272px}/*请给每个幻灯片套个div并设置id,通过id重置这个地方的宽度,达到自定义效果*/
.slider .bd{z-index:2;overflow:hidden}
.slider .bd li{float:left;width: 100%;overflow:hidden; background-position:center; background-repeat:no-repeat}
.slider .bd li a{ display:block; width: 100%; height: 100%}
.slider .bd li img{display:block}
.slider .hd{ position: absolute; z-index: 3; left: 0; right: 0; bottom:10px; padding: 0 10px; text-align: center}
.slider .hd li{display:inline-block;text-align:center;margin-right:10px;cursor:pointer;background-color:#C2C2C2}
.slider .hd li.active{background-color:#222}
/*圆点*/
.dots li{width:10px; height:10px;font-size:0px;line-height:0px;border-radius:50%}
/*数字*/
.numbox li{width:20px; height:20px; line-height:20px; font-size:13px;font-family:Arial;font-weight:bold; text-indent:inherit}
.numbox li.active{color:#fff}
/*长方条*/
.rectangle li{width:40px; height:10px;font-size:0px;line-height:0px}

默认hd上面追加的dots为圆点,将dots改为numbox就变成带数字的方框,rectangle为不带数字长方条

#slider-3{ width: 960px; height: 273px; overflow: hidden}/*这个是demo页面定义尺寸的样式,请根据自己幻灯片的尺寸重新定义。切莫生搬硬套。*/

js 代码

调用代码:

$(function(){
jQuery("#slider-3 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:7000,pnLoop:false,titOnClassName:"active"})});

宽屏幻灯片效果,要想撑满屏幕,建议图片宽度做成2000px以上,中间主要视觉区间控制在网页的宽度之内,两边过渡到纯色,图片通过li上背景的方式去实现。这样不管是宽屏的还是窄屏的都可以很好的展示。具体效果见: http://lib.h-ui.net/jquery.SuperSlide/2.1.1/demo/02/demo.html

4.4.2 带缩略图效果

HTML代码

<div id="slider-1" class="bg-fff box-shadow radius">
<div class="slider">
<div class="bd bg-fff">
<ul>
<li><a href="#" target="_blank"><img src="images/b-1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/b-2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/b-3.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/b-4.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/b-5.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/b-6.jpg" ></a></li>
</ul>
</div>
<ol class="hd cl">
<li><i></i><img src="images/s-1.jpg"></li>
<li><i></i><img src="images/s-2.jpg"></li>
<li><i></i><img src="images/s-3.jpg"></li>
<li><i></i><img src="images/s-4.jpg"></li>
<li><i></i><img src="images/s-5.jpg"></li>
<li><i></i><img src="images/s-6.jpg"></li>
</ol>
</div>
</div>

CSS 代码

#slider-1{width:760px;text-align:center}
#slider-1 .bd,#slider-1 .bd li,#slider-1 .bd img{width:760px; height:220px}
#slider-1 .hd{ margin-top:2px;height:58px;width:762px}
#slider-1 .hd li{ position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px}
#slider-1 .hd li img{ display:block;width:125px; height:58px}
#slider-1 .hd li i{ position:absolute; display:block; z-index:9; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6)}
#slider-1 .hd li.active i{ width:11px; height:6px; background:url(images/iconpic-arrow-up.png) no-repeat 0 0; top:-6px; left:50%; margin-left:-5px; bottom:auto; right:auto}

js 代码

调用代码:

$(function(){
jQuery("#slider-1 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:850,interTime:7000,pnLoop:false,titOnClassName:"active"})});

很多幻灯片的效果都大同小异,只要你熟悉前端布局,举一反三,少加修改,就能变成不同的布局效果。

相关参数

参数 版本 默认值 说明 详细
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"类名用于控制样色。可参考 [2.22-真·全屏焦点图]
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名称