Unslider Web前端框架之图片轮播
前端框架,前端组件,前端库,都是一个意思,能看源码。
最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动。一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设置。unslider,满足了需求。
Unslider--入门篇
背景:因工作需求,需要完成一个图片轮播效果,因博主不是专业的前端开发人员,so google之,经过挑选最终选择使用Unslider插件完成工作。
一、Unslider插件介绍
unslider插件是一个超小的jQuery轮播(slider)插件,大小不到3k,源码托管在GitHub上,是一个开源项目。
1、跨浏览器
Unslider已经在所有最新的浏览器上测试过了,并能对那些老旧的浏览器也能做出很好的降级处理。(PS:博主亲测,在IE8上使用正常
2、支持键盘导航(没错,你没看错,就是键盘上的左右键,很炫,有木有!!)
3、自动调整高度
4、支持响应式布局(不懂的链接在此,自戳:响应式布局)
说了这么多特色了,看一下效果眼见为实吧,链接:http://www.bootcss.com/p/unslider/
看了效果,有没有感觉博主的好多文是copy来的,╮(╯▽╰)╭木办法,博主水平有限,只能边学边做笔记给大家分享了,多多包涵啦。( ̄︶ ̄)↗
二、如何使用Unslider
1、引入jQuery和Unslider
使用Unslider,你需要在页面中引入Unslider和jquery脚本,jQuery版本不限,建议在版本1.8+(博主亲测使用1.8版本的jQuery.js可正常使用Unslider脚本)。
如何验证页面已引入jQuery脚本,按F12,在控制台中输入!!window.jQuery,若返回true,则说明页面中已引入jQuery脚本。
引入jQuery、Unslider脚本,页面代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script src="//code.jquery.com/jquery-latest.min.js"></script> 2 <script src="//unslider.com/unslider.js"></script>
2、准备HTML代码
div+ul li(无序列表),完美解决,无需额外的html标签!为了简洁我们的例子只写三个li,上代码!
1 <div class="banner"> 2 <ul> 3 <li style="width:100%;height:50px;"> 4 <h1>This is a slide.</h1> 5 </li> 6 <li style="width:100%;height:50px;"> 7 <h2>This is another slide.</h2> 8 </li> 9 <li style="width:100%;height:50px;"> 10 <h3>This is a final slide.</h3> 11 </li> 12 </ul> 13 </div>
PS:css样式以及h1、h2、h3标签的使用,只是为了能更好的展现出页面切换的效果,不必深究。
3、增加Css样式,使页面效果更漂亮
Unslider插件没有提供一个标准的CSS样式,你可以尽情操作每张幻灯片(每个li标签内存放一张幻灯片)的Css样式,自由度之大可以想象。
1 .banner { 2 position: relative; 3 overflow: auto; 4 } 5 .banner li { 6 list-style: none; 7 } 8 .banner ul li { 9 float: left; 10 }
4、使用unslider插件
1 $(function() { 2 var slidey = $('.banner').unslider({ 3 speed: 500, 4 delay: 3000, 5 complete: function() {}, 6 keys: true, 7 dots: true, 8 fluid: false 9 }); 10 data = slidey.data('unslider'); 11 data.move(2, function() {}); 12 });
二、源码分析
三、定制自己需要的幻灯片
终于看完大部分了。好了,通过源码至少我知道了该怎样去控制外观,现在我要动手啦,心里有点小激动呢~
我选择Unslider是因为它是如此纯粹,正如我想要的那样,啥也可以不要,只要能自动循环播放、用导航点控制翻页就满足我的要求了。
因为默认就是自动循环播放的,所以我只要设置一个显示导航点的参数即可,然后锦上添花也支持一下响应式吧:
通过源码我们知道unslider为我们写好了导航点的文档结构、并取好了类名,但并没有设置样式,所以只是传个参数是木有用滴,要自己写样式才能看见那些可爱的点点:
大功告成!
四、总结
对jquery的事件机制还不熟悉,遇到自定义事件啥的就犯晕了,这块知识还要多加学习。
摘自:http://blog.csdn.net/u011411283/article/details/47066481
感谢分享!