幻灯片jquery.SuperSlide插件
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
本站郑重声明:jquery.SuperSlide插件著作版权归原作者大话主席所有。感觉不错可以支持下作者:http://www.superslide2.com/。
本插件建议用于PC端网页,移动端建议使用TouchSlide插件。
引入jQuery 和 jquery.SuperSlide.js
<script type="text/javascript" src="//lib-h-ui-net/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="//lib-h-ui-net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
4.4.1 焦点图效果(自动播放,圆点控制)
HTML
SCSS
CSS
JS
<div id="hui-carousel-demo"> <div class="hui-carousel"> <div class="bd"> <ul> <li> <a href="http://www.h-ui.net/" target="_blank"><img src="h-ui/images/temp/banner-1.jpg" ></a> </li> <li> <a href="http://www.h-ui.net/zhaoshang.shtml" target="_blank"><img src="h-ui/images/temp/banner-2.jpg" ></a> </li> <li> <a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="h-ui/images/temp/banner-3.jpg" ></a> </li> </ul> </div> <ol class="hd cl dots"> <li>1</li> <li>2</li> <li>3</li> </ol> </div> </div>
.hui-carousel { position: relative; text-align: center; margin: 0 auto; z-index: 1; .bd, .bd li, .bd img { width: 100%; height: 100%; } .bd { z-index: 2; overflow: hidden; li { float: left; width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; a { display: block; width: 100%; height: 100%; } img { display: block; } } } .hd { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; padding: 0 10px; text-align: center; li { display: inline-block; text-align: center; margin-right: 10px; cursor: pointer; background-color: #C2C2C2; &.active { background-color: #222; } } /*圆点*/ &.dots { li { width: 10px; height: 10px; font-size: 0px; line-height: 0px; @include borderRadius(50%); } } /*数字*/ &.numbox { li { width: 20px; height: 20px; line-height: 20px; font-size: 13px; font-family: Arial; font-weight: bold; text-indent: inherit; &.active { color: #fff } } } /*长方条*/ &.rectangle { li { width: 40px; height: 10px; font-size: 0px; line-height: 0px } } } .hui-carousel-arrow { display: block; position: absolute; top: 50%; margin-top: -25px; height: 50px; width: 50px; line-height: 50px; text-align: center; z-index: 3; opacity: 0.7; filter: alpha(opacity=70); &:hover { opacity: 1; filter: alpha(opacity=100) } &.prev { left: 0; } &.next { right: 0; } } }
.hui-carousel { position: relative; text-align: center; margin: 0 auto; z-index: 1; } .hui-carousel .bd, .hui-carousel .bd li, .hui-carousel .bd img { width: 100%; height: 100%; } .hui-carousel .bd { z-index: 2; overflow: hidden; } .hui-carousel .bd li { float: left; width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; } .hui-carousel .bd li a { display: block; width: 100%; height: 100%; } .hui-carousel .bd li img { display: block; } .hui-carousel .hd { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; padding: 0 10px; text-align: center; /*圆点*/ /*数字*/ /*长方条*/ } .hui-carousel .hd li { display: inline-block; text-align: center; margin-right: 10px; cursor: pointer; background-color: #C2C2C2; } .hui-carousel .hd li.active { background-color: #222; } .hui-carousel .hd.dots li { width: 10px; height: 10px; font-size: 0px; line-height: 0px; border-radius: 50%; } .hui-carousel .hd.numbox li { width: 20px; height: 20px; line-height: 20px; font-size: 13px; font-family: Arial; font-weight: bold; text-indent: inherit; } .hui-carousel .hd.numbox li.active { color: #fff; } .hui-carousel .hd.rectangle li { width: 40px; height: 10px; font-size: 0px; line-height: 0px; } .hui-carousel .hui-carousel-arrow { display: block; position: absolute; top: 50%; margin-top: -25px; height: 50px; width: 50px; line-height: 50px; text-align: center; z-index: 3; opacity: 0.7; filter: alpha(opacity=70); } .hui-carousel .hui-carousel-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .hui-carousel .hui-carousel-arrow.prev { left: 0; } .hui-carousel .hui-carousel-arrow.next { right: 0; }
调用代码:
$(function(){ jQuery("#hui-carousel-demo .hui-carousel").slide({ mainCell: ".bd ul", titCell: ".hd li", trigger: "click", effect: "leftLoop", autoPlay: true, delayTime: 700, interTime: 3000, pnLoop: false, titOnClassName: "active" }); });
默认hd上面追加的dots为圆点,将dots改为numbox就变成带数字的方框,rectangle为不带数字长方条
#hui-carousel-demo{ width: 960px; height: 273px; overflow: hidden}/*这个是demo页面定义尺寸的样式,请根据自己幻灯片的尺寸重新定义。切莫生搬硬套。*/
宽屏幻灯片效果,要想撑满屏幕,建议图片宽度做成2000px以上,中间主要视觉区间控制在网页的宽度之内,两边过渡到纯色,图片通过li上背景的方式去实现。这样不管是宽屏的还是窄屏的都可以很好的展示。具体效果见: http://lib-h-ui-net/jquery.SuperSlide/2.1.1/demo/02/demo.html
4.4.2 带缩略图效果
HTML
SCSS
CSS
JS
<div id="hui-carousel-1" class="bg-fff box-shadow radius">
<div class="hui-carousel">
<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 clearfix">
<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>
#hui-carousel-1 { width:760px;text-align:center} #hui-carousel-1 .bd, #hui-carousel-1 .bd li, #hui-carousel-1 .bd img { width:760px; height:220px} #hui-carousel-1 .hd { margin-top:2px;height:58px;width:762px} #hui-carousel-1 .hd li { position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px} #hui-carousel-1 .hd li img{ display:block;width:125px; height:58px} #hui-carousel-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)} #hui-carousel-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}
调用代码:
$(function(){
jQuery("#hui-carousel-1 .hui-carousel").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名称 |