你的位置:首页 > Java教程

[Java教程]移动端轮播图插件(支持Zepto和jQuery)


一. 效果图

 

二. 功能介绍

  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 >'; $.each(bannerList, function(index, item) {  var url = item["url"].match(/./) == '/' ? 'https://simu.dahuo.la' + item["url"] : item["url"];  html += '<li data-param="' + url + '"' + 'data-baidu-action="banner" data-baidu-label="' + (parseInt(index) + 1) + '">' +   '<div ><img 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 ><ul>';      for (var i = 0; i < settings.len; i++) {       if (i == 0) {        pagelist += '<li ></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();        //e.preventDefault();        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;        var x = 0;        //避免禁用了下拉事件        if (Math.abs(moveY) > Math.abs(moveX)) {         window.event.returnValue = true;        } else {         e.preventDefault();        }        x = -settings.index * settings.width + moveX;        dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)");       },       "touchend": function(e) {        e.stopPropagation();        // e.preventDefault();        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() {      var pageIndex = null;      if (settings.infinite) {       if (settings.index == settings.count) {        pageIndex = 0;       } else if (settings.index == 0) {        pageIndex = 2;       } else {        pageIndex = settings.index - 1;       }      }      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);