pjr4z27u5/web/js/script.js

$(function() {

  $('#slider').slider();

  wallterFall();

});

function wallterFall() {
  var $wallterFall = $('.main-waterfall');
  var $wallterFall_wrap = $wallterFall.find('.main-cont__list');
  var $wallterFall_item = $wallterFall_wrap.find('.item');

  var box_w = 1200;
  var item_w = $wallterFall_item.eq(0).outerWidth();
  var cols = Math.floor(box_w / item_w);
  var height_arr = [];
  var n = 1;


  $wallterFall_item.each(function (i) {
    if (cols > i) {
      height_arr.push($(this).outerHeight());
    } else {
      var min_h = Math.min.apply(null, height_arr);
      var minH_index = $.inArray(min_h, height_arr);

      if (i === 9 || i === 14) {
        n ++;
      }

      $(this).css({position: 'absolute', top: min_h + (n * 20), left: minH_index * item_w + minH_index * 20});

      // height_arr 更新
      height_arr[minH_index] += $wallterFall_item.eq(i).outerHeight();
    }
  });
};

;(function ($, window, document, undefined) {

  var Plugin = function (elem) {
    var self = this;

    this.$oWrapper = elem;
    this.$slider_wrap = this.$oWrapper.find('.slider-wrapper');
    this.$slider_item = this.$slider_wrap.find('.item');
    this.$slider_prev = this.$oWrapper.find('.slider-prev');
    this.$slider_next = this.$oWrapper.find('.slider-next');
    this.$slider_title = this.$oWrapper.find('.slider-title').find('h2');
    this.$slider_author = this.$oWrapper.find('.slider-title').find('span');
    this.$slider_btn = this.$oWrapper.find('.slider-btns').find('.item');

    this.slider_w = this.$oWrapper.width();
    this.slider_len = this.$slider_item.length;
    this.data_title = [];
    this.data_author = [];
    this.b_stop = true;
    this.iNum = 0;
    this.iNum2 = 0;
    this.timer = null;

    this.$slider_item.each(function  (i) {
      self.data_title.push($(this).attr('data-title'));
      self.data_author.push($(this).attr('data-author') ? $(this).attr('data-author') : '');
    });
  };

  Plugin.prototype = {
    inital: function () {
      var self = this;

      this.$slider_wrap.css({width: this.slider_len * this.slider_w});

      this.setInfo(0);

      this.$slider_btn.click(function () {
        self.setInfo($(this).index());

        self.iNum = $(this).index();
        self.iNum2 = $(this).index();
      });

      this.$slider_prev.click(function () {
        if (self.b_stop) {
          self.b_stop = false;
        
          if (self.iNum === 0) {
            self.iNum = self.$slider_item.length - 1;
          } else {
            self.iNum --;
          }

          self.iNum2 --;

          self.setInfo(self.iNum);
        }
      });

      this.$slider_next.click(function () {
        if (self.b_stop) {
          self.b_stop = false;

          if (self.iNum === self.$slider_item.length - 1) {
            self.iNum = 0;
          } else {
            self.iNum ++;
          }

          self.iNum2 ++;

          self.setInfo(self.iNum);
        }
      });

      // 自动播放
      this.autoPlay();

      this.$oWrapper.hover(function () {
        clearInterval(self.timer);
      }, function () {
        self.autoPlay();
      });
    },

    setInfo: function (index) {
      var self = this;

      if (this.iNum2 <= this.slider_len - 1 && this.iNum2 !== -1) { // 普通情况下
        this.$slider_wrap.animate({left: this.slider_w * -index}, function () {
          self.b_stop = true;
        });
      } else if (this.iNum2 > this.slider_len - 1) { // 最后一张无缝切到第一张
        this.$slider_item.eq(0).css({position: 'relative', left: this.slider_w * this.slider_len});

        this.$slider_wrap.animate({left: -this.slider_w * this.iNum2}, function () {
          self.b_stop = true;

          self.iNum2 = 0;
          self.$slider_item.eq(0).css({position: 'static'});
          self.$slider_wrap.css({left: 0});
        });
      } else { // 第一张无缝切到最后一张
        this.$slider_item.eq(this.slider_len - 1).css({position: 'relative', left: -this.slider_w * this.slider_len});

        this.$slider_wrap.an
        self.b_stop = true;
        this.$slider_wrap.animate({left: -this.slider_w * this.iNum2}, function () {
          self.iNum2 = self.slider_len - 1;
          self.$slider_item.eq(self.slider_len - 1).css({position: 'static'});
          self.$slider_wrap.css({left: (self.slider_len - 1) * -self.slider_w});
        });
      }

      this.$slider_btn.removeClass('item-cur');
      this.$slider_btn.eq(index).addClass('item-cur');

      this.$slider_title.html(this.data_title[index]);
      if (this.data_author[index]) {
        this.$slider_author.html(this.data_author[index]);
      } else {
        this.$slider_author.html('');
      }
    },

    autoPlay: function () {
      var self = this;

      this.timer = setInterval(function () {
        self.$slider_next.click();
      }, 4000);
    },

    constructor: Plugin
  };

  $.fn.slider = function () {
    var plugin = new Plugin(this);

    plugin.inital();
  };

})(jQuery, window, document);