jQuery实现视差滚动轮播代码解析之 JavaScript

系列

神图镇楼

一、前言

接上一章，HTML+CSS针对此完成了他们的使命，接下来该JS大显神通了。上一章最后我们也分析了JS要弥补HTML+CSS不能实现的哪些逻辑，所以本章我们就讲解如何使用JS处理这些逻辑。
因为是使用jQuery这个框架（对原生JS的优雅封装，使JS更简洁地调用），所以先在body后引入jQuery框架。我采用的是cdn的方式引入。并创建index.js用以处理本项目的js逻辑。
请注意我在代码块里的注释很重要，是精髓

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
//注意，index.js的引入一定要在jQuery下面，否则使用jQuery会报错。因为前端代码都是自上而下进行编译执行。
<script type="text/javascript" src="js/index.js"></script>

二、根据选择器获取所有需要用到的标签

根据上节末尾的分析：

js需要处理的逻辑.png

JS是针对轮播部分进行的逻辑操作。所以我们首先通过dom操作获取到所有轮播部分的标签。

jQuery处理dom节点是在document的ready闭包中。这与原生JS的window.onload有本质区别。网上有很多这两者的比较，介绍的也很详细。

$(document).ready(function () {
    //在这里开始JS操作
    startJSAction();
});

//获取所有轮播部分的标签
var startJSAction = function(){
     //获取轮播容器标签banner
     var banner = $("#banner");
    //获取banner下的所有大图容器(大图ul标签)
    var banner_images = $(".banner_images", banner);
    //获取所有轮播图片容器下的子标签(ul下的li标签集合)
    var images = banner_images.children();
    //记录轮播图数量
    imagesCount = images.length;
    //获取前置后置标签
    var bannerGuide_last = $(".bannerGuide_last", banner);
    var bannerGuide_next = $(".bannerGuide_next", banner);
    //获取3张背景图
    var bannerBg01 = $(".bannerBg01", banner);
    var bannerBg02 = $(".bannerBg02", banner);
    var bannerBg03 = $(".bannerBg03", banner);
    //获取缩略图容器(缩略图ul标签)
    var banner_thumbnails = $(".banner_thumbnails", banner);
    //获取缩略图容器下的所有子标签(ul下的li标签集合)
    var thumbnails = banner_thumbnails.children();
    //获取loading框和banner_content
    var banner_loading = $(".banner_loading", banner);
    //获取轮播主体容器
    var banner_content = $(".banner_content", banner);
    //获取轮播主体容器下的所有图片（包括大图与缩略图）
    // var allImages = $("img", banner_content);
    var allImages = banner_content.find("img");
    //记录当前轮播图展示位置
    currentIndex = 0;
};

三、JS处理遗留逻辑

1.所有图片加载完成后，隐藏加载框，显示轮播主体

隐藏加载框，显示轮播主体很简单。上面我们通过dom操作已经获取到了加载框和轮播主体。通过jQuery语法如下：

//隐藏加载框
banner_loading.hide();
//显示轮播主体
banner_content.show();

但是关键问题是怎么获取到所有图片加载完成这个节点！！！
我们知道jQuery中有个load函数，其有个闭包参数是作为img标签中图片加载完成的回执（这种说法实际是不严谨的，load函数可以监听所有有url的加载完成的回执）。
但是这里有个问题，在浏览器中，加载后的图片有可能会被缓存。也就是说下次load闭包因为缓存问题就不能监听到回执。
这种情况会导致下次浏览器再次加载轮播图，就不会执行到“隐藏加载框，显示轮播主体及其以后的逻辑”。这是个灾难~
解决流程：
程序员肯定有他屌丝的办法去解决一切看似不可能完成的问题~

遍历轮播主体中所有图片标签。
遍历时创建一个新的img标签，并拥有和轮播主体一样的src属性
这样，新的img标签在每次加载组件时就不会担心缓存问题。我们在load闭包中，通过已加载图片的数量与原图片数量进行比较，就可以获取所有图片加载完成的节点。
代码如下:

//遍历这些图片
loaded = 0; 
allImages.each(function () {
    //新建img标签,并将原图片的src赋值给新的img标签
    //新建的原因，是避免原img缓存后，不执行load闭包
    $('<img/>').load(function () {
        ++loaded;
        if (loaded == imagesCount * 2) { //说明加载完成
               //...这里处理之后的所有逻辑
        }
    }).attr('src', $(this).attr('src'));
});

2.重新设置大图与前置后置标签布局

上次也分析了，我们的大图容器ul标签下的li标签因为设置了左浮动，所以变为行内块级标签。所以我们要根据大图数量设置ul标签的宽度，使其内部的行内块级标签不用换行。

//获取窗口宽度
var window_width = $(window).width();
var set_width = function (banner_images,
                          images,
                          imagesCount,
                          bannerBg01,
                          bannerBg02,
                          bannerBg03,
                          firstImage_width,
                          bannerGuide_last,
                          bannerGuide_next) {
    //根据图片数量计算出需要的总宽度
    var contentSize_Width = imagesCount * window_width;
    //设置大图容器宽度（大图ul标签宽度）
    banner_images.width(contentSize_Width + 'px');
    //设置所有的图片容器的子标签的宽度（li标签宽度）
    images.width(window_width + 'px');
    //设置背景图的宽度
    bannerBg01.width(contentSize_Width + 'px');
    bannerBg02.width(contentSize_Width + 'px');
    bannerBg03.width(contentSize_Width + 'px');
    //计算出前后置标签的绝对位置
    var guidePosition = (window_width - firstImage_width) * 0.5 + 3;
    bannerGuide_last.css({"left": guidePosition + 'px'});
    bannerGuide_next.css({"right": guidePosition + 'px'});
};

3. 计算缩略图绝对位置，设置随机偏移角度，并为其绑定事件

CSS中，设置了每个缩略图的li标签相对于其容器ul为绝对定位，但是并没有设置其定位的值，所以目前缩略图都是重叠在一起的。我们要通过图片数量计算定位，将其均匀分布在屏幕中。

banner_thumbnails.css({
  //设置缩略图容器宽度
  "width": firstImage_width + 'px',
  //设置margin-left，让其居中显示
  "margin-left": -firstImage_width * 0.5 + 'px'
});
//遍历缩略图
thumbnails.each(function (index) {
  //计算缩略图之间的间距
  var thumbnailSpace = firstImage_width / (thumbnails.length + 1);
  //随机偏移角度
  var angle = Math.floor(Math.random()*41)-20;
  $(this).css({
     //设置绝对定位，使其均匀分布
    "left": thumbnailSpace * (index + 1) - $(this).width() * 0.5,
    //设置随机偏移
    "transform": 'rotate('+ angle +'deg)'
  });
  //为每个缩略图绑定指定事件
  $(this).bind('mouseenter', function () {
    //相当于设置hover伪类
    $(this).stop().animate({top:'-10px'}, 100);
  }).bind('mouseleave', function () {
    $(this).stop().animate({top:'0px'}, 100);
  }).bind('click', function () {
    //绑定点击事件
    currentIndex = index;
    //轮播滚动到指定大图
    scrollTo(currentIndex, banner_images, bannerBg01, bannerBg02, bannerBg03);
    对应缩略图高亮显示
    thumbHighlight(thumbnails.eq(currentIndex));
  });
});

4. 轮播滚动至指定位置，并设置对应缩略图高亮

因为大图容器是相对于轮播容器的绝对定位，所以滚动到指定位置，我们可以动态更改大图容器（ul标签）的left值，就可以满足需求。
而缩略图高亮，我们在CSS阶段就考虑到了，有种带selected类选择器的就是高亮状态，所以我们只需要设置其是否拥有这个类选择器，从而改变其高亮状态。

var window_width = $(window).width();
//大图滚动至指定位置
var scrollTo = function (currentIndex,
                         banner_images,
                         bannerBg01,
                         bannerBg02,
                         bannerBg03) {
    //设置当前大图需要在X轴的左偏移量
    var contentOffsetX = -window_width * currentIndex;
    //动画更新大图容器left值
    banner_images.stop().animate({
        left: contentOffsetX + 'px'
    }, 1000, 'swing');
    //动画更新背景一偏移量
    bannerBg01.stop().animate({
        left: contentOffsetX * 0.5 + 'px'
    }, 1000, 'swing');
    //动画更新背景二偏移量
    bannerBg02.stop().animate({
        left: contentOffsetX * 0.25 + 'px'
    }, 1000, 'swing');
    //动画更新背景三偏移量
    bannerBg03.stop().animate({
        left: contentOffsetX * 0.125 + 'px'
    }, 1000, 'swing');
};

有很多小伙伴很好奇什么是视差轮播。其实这里的代码已经说明了一切，因为有三张背景图。且轮播滚动的时候，三张背景图的偏移量不同步，就产生了视差的效果

//设置缩略图高亮
var thumbHighlight = function (thumbElement) {
    //兄弟节点都移除selected类选择器
    thumbElement.siblings().removeClass('selected');
    //自身添加selected类选择器
    thumbElement.addClass('selected');
};

5.为前置后置绑定点击事件

//为前置标签绑定点击事件
bannerGuide_next.bind('click', function () {
  //切到最后，变为初始的第一张
  ++currentIndex;
  if (currentIndex >= imagesCount) {
    currentIndex = 0;
  }
  //滚动至指定大图
  scrollTo(currentIndex, banner_images, bannerBg01, bannerBg02, bannerBg03);
  //设置指定缩略图高亮
  thumbHighlight(thumbnails.eq(currentIndex));
});
//..为后置标签绑定点击事件

四、代码优化重构

上面的一系列js操作，实际上已经完成了项目的需求，但是却不够优雅。因为我一开始就称这个小项目可以作为一个组件，作为组件肯定不只是要满足这一个需求，所以我们要对代码进行重构。
设置jQuery对象的默认参数

$.fn.banner.defaults = {
        //自动轮播时长(为0不进行自动轮播)
        autoDuration: 0,
        //动画类型
        easing: 'swing'
        //...后期扩展组件功能进行相应增加
};

定义一个自执行函数，并以jQuery作为参数传入。
在自执行函数中，为所有jQuery对象扩展一个新的函数,此函数就是处理轮播的js逻辑。

这个扩展的新函数，类似于iOS中的分类。而且js中返回其本身，好处是可以继续点语法。也就是延续链式编程

//这里jQuery为实参，$为形参
(function ($) {
    //扩展一个名为banner的jQuery函数
    $.fn.banner = function(options){
        //对jQuery对象传入的参数与默认参数进行合并。
        //通过opts，就可以对组件功能进行任意扩展
        var opts = $.extend({}, $.fn.banner.defaults, options);
        //遍历jquery实例，并返回其本身
        //返回本身的好处是可以继续链式编程
        return this.each(function () {
              startJSAction(opts);
        });
    };
}(jQuery)；

$(document).ready(function () {
    //获取轮播容器，调用新扩展的名为banner的jQuery函数
    $("#banner").banner({});
});

六、总结

因为算是web前端入门者，所以也没有过多地理论性地阐述为什么要这么做。我们先做的就是理解这些代码是什么意思，吸收体会这样写的好处，并慢慢接受对我来说是新语言的思想。
以上是我本人使用jQuery完成的第一个小项目。解释并简单说明了每一行代码。作为新人，通过这两篇文章基本上能让你看懂这些代码的含义。如果发现问题，请不吝指明，谢谢。
最后再次声明：这是Demo，如果您觉得文章与代码对您学习js有了那么一些提升，请点个赞，并给个Star鼓励一下😀