幻灯片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="//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代码

<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上背景的方式去实现。这样不管是宽屏的还是窄屏的都可以很好的展示。具体效果见： /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"})});

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

相关参数