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脚本，页面代码如下：

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;background-color:red;">
 4             <h1>This is a slide.h1>
 5         li>
 6         <li style="width:100%;height:50px;background-color:yellow;">
 7             <h2>This is another slide.h2>
 8         li>
 9         <li style="width:100%;height:50px;background-color:blue;">
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插件

$(function() {
  var slidey = $('.banner').unslider({
    speed: 500,			   
  delay: 3000,			
  complete: function() {}, 
  keys: true,			 
  dots: true,			  
  fluid: false
});
  data = slidey.data('unslider'); 
  data.move(2, function() {}); 
});

二、源码分析

 /**
  *   Unslider by @idiot and @damirfoy
  *   Contributors:
  *   - @ShamoX
  *
  */

 (function($, f) {
     var Unslider = function() {
         //  克隆对象
         var _ = this;

         //  设置一些默认参数
         _.o = {
             speed: 500,     // 动画过渡的速度(毫秒),如果不需要过渡效果就设置为false
             delay: 3000,    // 每张幻灯片的间隔时间(毫秒), 如果不是自动播放就设置为false
             init: 0,        // 初始化延迟时间(毫秒),如果不需要延迟就设置为false
             pause: !f,      // 当鼠标指针浮动在当前区域内时是否暂停自动播放
             loop: !f,       // 是否无尽循环播放
             keys: f,        // 是否开启键盘导航
             dots: f,        // 是否显示导航点
             arrows: f,      // 是否显示向前和向后的箭头
             prev: '←',     // 向前按钮中的显示文字(或html片段)
             next: '→',     // 向后......
             fluid: f,       // 是否宽度自适应
             starting: f,    // 在每个动画前调用的函数
             complete: f,    // 在每个动画之后调用的函数
             items: '>ul',   // 幻灯片的容器选择器
             item: '>li',    // 需要滚动的选择器
             easing: 'swing',// 动画的缓动函数(easing function)
             autoplay: true  // 是否允许自动播放
         };

         _.init = function(el, o) {
             //  将我们在外部调用时设置的参数覆盖掉默认参数
             _.o = $.extend(_.o, o);

             _.el = el;
             _.ul = el.find(_.o.items);//返回ul元素集合
             _.max = [el.outerWidth() | 0, el.outerHeight() | 0];//保存一下幻灯片div容器的宽和高
             _.li = _.ul.find(_.o.item).each(function(index) {
                 var me = $(this),
                     width = me.outerWidth(),
                     height = me.outerHeight();

                 //  记录最大幻灯片的宽高
                 if (width > _.max[0]) _.max[0] = width;
                 if (height > _.max[1]) _.max[1] = height;
             });


             //  申请一些临时变量
             var o = _.o,
                 ul = _.ul,
                 li = _.li,
                 len = li.length;//li元素个数

             //  当前索引，或者叫页码更容易理解吧，源代码中写了“Current indeed”，应该是“index”吧
             _.i = 0;

             //  设置幻灯片div容器的样式，高度初始化为第一个li的高度
             el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});

             //  设置ul元素的位置和宽度，宽度的公式是(li元素的个数乘以100)%，我的例子中就是300%
             ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});
             if(o.fluid) {
                 li.css({'float': 'left', width: (100 / len) + '%'});//自适应宽度时，li元素的宽度就是把ul的宽度平均分成len份
             } else {
                 li.css({'float': 'left', width: (_.max[0]) + 'px'});//不是自适应时，li元素的宽度是最大的幻灯片的宽度
             }

             //  在init毫秒后开启自动播放
             o.autoplay && setTimeout(function() {
                 if (o.delay | 0) {
                     _.play();

                     if (o.pause) {
                         el.on('mouseover mouseout', function(e) {
                             _.stop();//鼠标经过时暂停
                             e.type == 'mouseout' && _.play();//鼠标离开时播放
                         });
                     };
                 };
             }, o.init | 0);

             //  键盘事件处理
             if (o.keys) {
                 $(document).keydown(function(e) {
                     var key = e.which;

                     if (key == 37)
                         _.prev(); // 左箭头按键
                     else if (key == 39)
                         _.next(); // 右箭头按键
                     else if (key == 27)
                         _.stop(); // Esc
                 });
             };

             //  显示导航点
             o.dots && nav('dot');

             //  显示箭头
             o.arrows && nav('arrow');

             //  使幻灯片div容器宽度自适应
             if (o.fluid) {
                 $(window).resize(function() {
                     _.r && clearTimeout(_.r);

                     _.r = setTimeout(function() {
                         var styl = {height: li.eq(_.i).outerHeight()},
                             width = el.outerWidth();

                         ul.css(styl);
                         //这一串真是绕，其实就是计算div占父窗口的宽度原始比例，然后记录到styl中
                         styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';
                         el.css(styl);//重新设置幻灯片div容器的宽度为比例而不是像素值，这样就能达到自适应的目的了
                         li.css({ width: width + 'px' });//设置li的绝对宽度，以防因div被自适应了而挤压或拉伸了li造成内容扭曲（如有误请大神指教）
                     }, 50);//每次父窗口改变大小时，幻灯片div容器延迟50毫秒后再跟着自适应大小，请大神告诉我这样做的目的仅仅是为了效果更自然么
                 }).resize();//强制执行resize事件，使得自适应特性在最开始时就被设置好了
             };

             //  自定义move事件，这一段不太懂，求大神指点
             if ($.event.special['move'] || $.Event('move')) {
                 //  为幻灯片div元素绑定movestart、move、moveend事件
                 el.on('movestart', function(e) {
                     if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
                         e.preventDefault();//鼠标位置不在当前区域时取消事件的默认动作（我猜的，关键是不知道distX这几个的准确含义）
                     }else{
                         el.data("left", _.ul.offset().left / el.width() * 100);
                     }
                 }).on('move', function(e) {
                         var left = 100 * e.distX / el.width();
                         var leftDelta = 100 * e.deltaX / el.width();
                         _.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%";

                         _.ul.data("left", left);
                     }).on('moveend', function(e) {
                         var left = _.ul.data("left");//
                         if (Math.abs(left) > 30){
                             var i = left > 0 ? _.i-1 : _.i+1;
                             if (i < 0 || i >= len) i = _.i;
                             _.to(i);
                         }else{
                             _.to(_.i);
                         }
                     });
             };

             return _;
         };

         //  播放指定索引的幻灯片
         _.to = function(index, callback) {
             if (_.t) {
                 _.stop();
                 _.play();
             }
             var o = _.o,
                 el = _.el,
                 ul = _.ul,
                 li = _.li,
                 current = _.i,
                 target = li.eq(index);
             //在动画之前执行的函数，我的例子里都没有，可以忽略它们
             $.isFunction(o.starting) && !callback && o.starting(el, li.eq(current));

             //  如果(一张幻灯片也没有或者索引无效)，并且不是循环播放，就啥也不做，我觉得这样不好，因为to这个函数就只能在循环播放状态下工作了
             if ((!target.length || index < 0) && o.loop == f) return;

             //  检查索引是否有效，超出时设置为0，即第一张幻灯片
             if (!target.length) index = 0;
             if (index < 0) index = li.length - 1;//索引负数时设置为最后一张幻灯片
             target = li.eq(index);//获取目标元素

             var speed = callback ? 5 : o.speed | 0,//执行回调函数后返回的是真则speed设为5，如果没有回调函数或返回假则设置为o.speed
                 easing = o.easing,
                 obj = {height: target.outerHeight()};

             if (!ul.queue('fx').length) {//确保没有为ul元素添加函数队列，应该是为了防止上一次动作还没有完成吧
                 //  设置对应导航点的高亮
                 el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');
                 //  改变幻灯片div容器的高度为目标元素的高度，并把ul的位置向左移动(index*100%)，使目标元素正好在幻灯片div容器区域
                 el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) {
                     _.i = index;//移动结束之后更新一下当前索引
                     //动画结束之后执行的函数，我的例子中也没有，忽略它们
                     $.isFunction(o.complete) && !callback && o.complete(el, target);
                 });
             };
         };

         //  每隔delay毫秒自动播放
         _.play = function() {
             _.t = setInterval(function() {
                 _.to(_.i + 1);//这里就加了1个索引号，具体的处理都封装在了to方法中
             }, _.o.delay | 0);
         };

         //  停止自动播放
         _.stop = function() {
             _.t = clearInterval(_.t);
             return _;
         };

         //  向后翻一张
         _.next = function() {
             return _.stop().to(_.i + 1);
         };
         //  向前翻一张
         _.prev = function() {
             return _.stop().to(_.i - 1);
         };

         //  创建导航点和箭头
         function nav(name, html) {
             if (name == 'dot') {
                 html = '';
                 $.each(_.li, function(index) {
                     html += ' + (index == _.i ? name + ' active' : name) + '">' + ++index + '
                 });
                 html += '

' + html + name + ' next">' + _.o.next + '

';  

                /*也整理一下 

                   

                    ←

 

                    →