Unslider.js轻量级jQuery轮播插件

Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局

Unslider.js轻量级jQuery轮播插件

图片滚动效果必不可少的网页特效,Unslider一款非常轻量的 jQuery 插件,是我见过的最棒的图片滑动效果,简单灵活,自适应宽高,支持响应式布局,支持键盘导航

如何使用?


<section class="slider cl has-dots">
  <a href="javascript:void(0)" class="unslider-arrow prev"></a><!--上一张控制按钮-->
  <a href="javascript:void(0)" class="unslider-arrow next"></a><!--下一张控制按钮-->
  <!--左右控制按钮,如果不需要可以直接删除代码。-->
  <ul class="tabcon">
    <li><img name="" src="pic/1.png" width="300" height="150" alt=""></li>
    <li><img name="" src="pic/2.png" width="300" height="150" alt=""></li>
    <li><img name="" src="pic/3.png" width="300" height="150" alt=""></li>
  </ul>
</section>  

.slider{ position:relative;text-align:center}
.slider .tabcon li{float: left;overflow:hidden}/*自适应宽高*/
.dots{position:absolute;right:0px; width:100%;bottom:10px; text-align:center} /*修改text-align 值 可以调整控制点是居中、居右、居左*/
.dots span{display:inline-block;text-align:center;width:8px; height:8px; font-size:0px;line-height:0px;margin-right:8px;cursor:pointer; background-color:#C2C2C2;-khtml-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}
.dots span.active{ background-color:#222;}
/*数字方框控制*/
.numSlider .dots span{width:20px; height:20px; line-height:20px; font-size:13px; margin-right:10px;line-height:20px;background-color:#fff;font-family:Arial;font-weight:bold;text-indent:inherit;-khtml-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px}
.numSlider .dots span.active{background-color:#222;color:#fff;}
/*长方条控制*/
.boxSlider .dots span{ width:40px; height:10px;-khtml-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px}
/*圆角长方条控制*/
.boxRadius .dots span{ width:40px;}
.unslider-arrow{ display:block; position:absolute; top:50%; margin-top:-25px;height: 50px;width: 50px; z-index:3;opacity: 0.7;filter: alpha(opacity=70); background-color:#303030; background-image:url(../images/unslider-arrow.png); background-repeat:no-repeat}
.prev{ left:0px; background-position:0 0}
.next{ right:0px;background-position:right 0}

默认dots为圆点,在slider后面追加numSlider样式就变成带数字的方框,boxSlider为不带数字长方条,boxRadius为不带数字圆角长方条


<section class="slider numSlider cl has-dots">……</section>
<section class="slider boxSlider cl has-dots">……</section>
<section class="slider boxRadius cl has-dots">……</section>

引入jQuery 和 Unslider


<script type="text/javascript" src="../jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../unslider.min.js"></script>
<!--   直接调用
<script src="//code.jquery.com/jquery-latest.min.js"></script>   //
<script src="//unslider.com/unslider.js"></script>
-->

调用代码:


$(function() {
	if(window.chrome){$('.slider li').css('background-size', '100% 100%');}
	$('.slider').unslider({
		speed: 500,               //  滚动速度
		delay: 3000,              //  动画延迟
		complete: function() {},  //  动画完成的回调函数
		keys: true,               //  启动键盘导航
		dots: true,               //  显示点导航
		fluid: true               //  支持响应式设计
	});
	// 左右控制js
	var unslider = $('.slider').unslider();
	$('.unslider-arrow').click(function(){
		var fn = this.className.split(' ')[1];
		unslider.data('unslider')[fn]();
	});
});

Unslider.js官网地址

http://www.bootcss.com/p/unslider/

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/147.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部