banner轮播图

一. 效果图


二. 功能介绍

　　1. 支持图片自动轮播和非自动轮播

　　2. 支持点击和滑动。
三. 简单介绍

　　代码都有注释，逻辑简单，不做更多赘述。

　　1. 在你的html中添加一行。

<section class="slider-wrap" style="height:160px" id="banner"></section>

   2. 在你的处理页面逻辑的JS代码中添加以下代码：

　　　　（1）先是动态加载html。

　　　　（2）然后调用slider并且传入参数。

// banner
// bannerList结构:[{image: ..., url: ...}, {...}, {...}]
var bannerList = ...;
var bannerHTML = bannerList ? this.renderBanner(bannerList) : '';
$("#banner").html(bannerHTML);
$("#banner").slider({
  "autoScroll": true,
  "infinite": true
});

renderBanner: function(bannerList) {
  var html = '<ul class="slider-list">';
  $.each(bannerList, function(index, item) {
    var url = item["url"].match(/./) == '/' ? 'https://simu.dahuo.la' + item["url"] : item["url"];
    html += '<li class="slider-item openParam" data-param="' + url + '"' + 'data-baidu-action="banner" data-baidu-label="' + (parseInt(index) + 1) + '">' +
      '<div class="img-wrap"><img class="banner-image" src="' + item["image"] + '"/></div></li>';
  });
  html += '</ul>';
  return html;
},

    3. css样式代码

　　　　注意：部分图片资源需要更换。

.slider-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slider-list {
  display: -webkit-box;
  width: 100%;
  height: 100%;
}

.slider-item {
  width: 100%;
  list-style: none;
}

.slider-item a {
  display: block;
}

.slider-item img {
  width: 100%;
}

.transitionable {
  -webkit-transition: all 0.3s ease-in-out;
}

.slider-page {
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
  text-align: center;
}

.slider-page ul {
  display: inline-block;
  text-align: center;
}

.slider-page ul li {
  display: inline-block;
  vertical-align: top;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5)
}

.slider-page ul li.active {
  background: #fff
}

.img-wrap {
  width: 100%;
  height: 100%;
  background: #fafafa url("../images/loading.gif") no-repeat center center;
}

4. 插件原代码：

　　　　已经测试，jQuery和Zepto都适用。

复制代码

/*
 * slider
 */
;
(function($) {
  $.extend($.fn, {
    slider: function(obj) {
      this.each(function() {
        // 当前Zepto对象
        var $self = $(this);
        var dom = {
          "wrap": $self.find(".slider-list"),
          "item": $self.find(".slider-item"),
          "firstItem": $self.find(".slider-item").first(),
          "lastItem": $self.find(".slider-item").last(),
          "pagelist": null,
          "pageItem": null,
        };
        var settings = {
          "len": dom.item.length,
          "width": dom.wrap.width(),
          "startX": 0,
          "startY": 0,
          "index": obj ? (obj.infinite ? 1 : 0) : 0,
          "distance": 0,
          "timer": null,
          "autoScroll": obj ? (obj.autoScroll ? true : false) : false,
          "infinite": obj ? (obj.infinite ? true : false) : false
        };
        var funs = {
          init: function() {
            if (settings.len > 1) {
              funs.initUI();
              funs.bindEvent();
              if (settings.autoScroll) {
                settings.timer = setInterval(funs.autoAnimate, 3000);
              }
            }
          },
          initUI: function() {
            if (settings.infinite) {
              var cloneFisrt = dom.firstItem.clone();
              var cloneLast = dom.lastItem.clone();
              dom.wrap.append(cloneFisrt);
              cloneLast.insertBefore(dom.firstItem);
            }
            funs.creatPage();
            dom.item = $self.find(".slider-item");
            settings.count = dom.item.length;
            settings.distance = settings.width / 5;
            if (settings.infinite) {
              dom.wrap.css("-webkit-transform", "translate3d(" + -settings.width + "px,0,0)");
            }
          },
          creatPage: function() {
            var pagelist = '<div class="slider-page"><ul>';
            for (var i = 0; i < settings.len; i++) {
              if (i == 0) {
                pagelist += '<li class="active"></li>';
              } else {
                pagelist += '<li></li>';
              }
            }
            pagelist += '</ul></div>';
            $self.append(pagelist);
            dom.pagelist = $self.find(".slider-page");
            dom.pageItem = dom.pagelist.find("li");
          },
          bindEvent: function() {
            $self.off().on({
              "touchstart": function(e) {
                e.stopPropagation();
                clearInterval(settings.timer);
                settings.startX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;
                settings.startY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;
              },
              "touchmove": function(e) {
                e.stopPropagation();
                e.preventDefault();
                var curX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;
                var curY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;
                var moveX = curX - settings.startX;
                var moveY = curY - settings.startY;
                //避免禁用了下拉事件
                if (Math.abs(moveY) > Math.abs(moveX)) {
                  window.event.returnValue = true;
                }
                var x = -settings.index * settings.width + moveX;
                dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)");
              },
              "touchend": function(e) {
                e.stopPropagation();
                var curX = e.changedTouches ? e.changedTouches[0].pageX : e.originalEvent.changedTouches[0].pageX;
                var moveX = curX - settings.startX;
                if (Math.abs(moveX) >= settings.distance) {
                  settings.index = settings.index - Math.abs(moveX) / moveX; //判断是向左还是向右
                }
                if (settings.index >= settings.count - 1) {
                  settings.index = settings.count - 1;
                }
                if (settings.index <= 0) {
                  settings.index = 0;
                }
                funs.animate();
                if (settings.autoScroll) {
                  settings.timer = setInterval(funs.autoAnimate, 3000);
                }
              },
              "touchcancel": function(e) {
                dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
              },
              "webkitTransitionEnd": function(e) {
                e.stopPropagation();
                e.preventDefault();
                dom.wrap.removeClass("transitionable");
                if (settings.infinite) {
                  if (settings.index <= 0) {
                    settings.index = settings.count - 2;
                  }
                  if (settings.index >= settings.count - 1) {
                    settings.index = 1;
                  }
                }
                var itemIndex = settings.infinite ? settings.index - 1 : settings.index;
                dom.pageItem.removeClass("active");
                dom.pageItem.eq("" + itemIndex + "").addClass("active");
                dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
              }
            });
            $(window).on({
              "resize": function() {
                funs.adjustPos();
              },
              "orientationchange": function() {
                funs.adjustPos();
              }
            })
          },
          adjustPos: function() {
            settings.width = dom.wrap.width();
            settings.distance = settings.width / 5;
            dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
          },
          animate: function() {
            dom.wrap.addClass("transitionable");
            dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
          },
          autoAnimate: function() {
            if (settings.width > 0) {
              settings.index++;
              funs.animate();
            }
          }
        };

        funs.init();
      });
      return this;
    }
  });
})(window.jQuery || window.Zepto);