JavaScript资源预加载组件和滑屏组件的使用推荐

git clone https://github.com/jayZOU/preload.gitnpm installnpm run es6

Examples  <audio pSrc="../public/audio/a.mp3" preload="auto" controls></audio>  <audio pSrc="../public/audio/b.mp3" preload="auto" controls></audio>  <img pSrc="../public/image/b1.jpg" alt="">  <img pSrc="../public/image/b2.jpg" alt="">  <img pSrc="../public/image/b3.jpg" alt="">  <img pSrc="../public/image/b4.jpg" alt="">  /**  *  Preload 资源预加载组件  *  @author jayzou  *  @time 2016-1-12  *  @version 1.0.6  *  @class Preload  *  @param {object}  sources        必填 加载队列容器，支持队列加载以及加载一个队列后传入回调  *  @param {boolean} isDebug        选填   是否开启debug选项，用于移动端调试，默认false  *  @param {object} connector      选填   后台数据接口，可选择同步或异步  *  @param int     loadingOverTime   选填   预加载超时时间，默认15， 单位:秒  *  @param {object} loadingOverTimeCB  选填   预加载超时回调  *  @param {object}  wrap        选填  进度条容器，返回记载进度信息  *  @param {object}  completeLoad    选填  完成所有加载项执行回调，包括同、异步获取数据  **/  var preload = new Preload({    isDebug: true,    sources: {      imgs: {        source: [          "../public/image/b2.jpg",          "../public/image/b1.jpg"        ],        callback: function() {          console.log("队列1完成");        }      },      audio: {        source: [          "../public/audio/a.mp3",          "../public/audio/b.mp3"        ]      },      imgs2: {        source: [          "../public/image/b3.jpg",          "../public/image/b4.jpg",          "http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png",          "http://7xl041.com1.z0.glb.clouddn.com/audio.gif",        ],        callback: function() {          console.log("队列3完成");        }      }    },    loadingOverTime: 3,    loadingOverTimeCB: function(res) {      console.log("资源加载超时：", res);    },    connector: {      int1: {        url: 'http://localhost/test/index.php?callback=read&city=上海市',        jsonp: true      },      int2: {        url: 'http://localhost/test/index.php?callback=read&city=深圳市',        jsonp: false,        callback: function(data) {          console.log("同步：", data);        }      }    },    progress: function(completedCount, total) {      // console.log(total);      console.log(Math.floor((completedCount / total) * 100));    },    completeLoad: function() {      console.log("已完成所有加载项");    }  });  function read() {    console.log("异步：", arguments[0])  }

git clone https://github.com/jayZOU/slide.gitnpm installgulp

Examples全选复制放进笔记  /**  *  slide 滑屏组件  *  @author jayzou  *  @time 2015-10-25  *  @version 0.0.1  *  @class Slide  *  @param String  wrap          必填  传入滑动容器ID  *  @param String  currentClass      选填  滑动时切换动画class，默认current  *  @param boolean  startLocalstorage    选填  记录当前浏览页面  *  @param {Object} onChange        选填  切换完成回调  *  @param {Object} onDownChange      选填  下滑完成时回调  *  @param {Object} onUpChange       选填  上滑完成时回调  *  @param {Object} defaultClass      选填  滑动过程动画效果  **/  var slide = new Slide({    wrap: 'wrap',          //必填，传入滑动容器ID    currentClass: 'current',    //选填，滑动时切换动画class    startLocalstorage: false,    //选填，是否开启localstorage记录页面返回后是否回到上次访问的页面，默认false    onChange: function(){      //选填，每屏切换完成时的回调      console.log("onchange");    },    onDownChange: function(){    //选填，下滑完成时回调      console.log("onDownChange");    },    onUpChange: function(){    //选填，上滑完成时回调      console.log("onUpChange");    },    defaultClass: {          //选填，滑动过程动画效果      'webkitTransition': '-webkit-transform 0.5s ease',  //需要加前缀      'transform': 'translate(0px, 0px)'          //不需要加前缀    },  });  // slide.next();            //下一页  // slide.prev();            //上一页  // slide.playTo(3);            //直接跳转第n页  // console.log(slide.getPage());    //获取为当前页数  // slide.lockPage();          //锁住屏幕，禁止滑动  // slide.unLockPage();          //解锁屏幕，允许滑动  //辅助类  // slide.toggleClass(targ, className);  //置换class  // slide.addClass(targ, className);    //添加class  // slide.removeClass(targ, className);  //删除class  // slide.css(o, style);          //添加style样式