移动端无缝滑屏实现

1 布局 布局的包裹器：占满视口的宽度 滑屏元素(动态生成，根据图片的数量)

注意：1、querylector获取的是静态列表，动态添加元素后要重新获取一遍

2、有时候绘制跟不上js引擎的绘制，解决方法：定时器

2 基本滑屏 拿到元素和手指一开始(点击到布局包裹器上时)的位置； 拿到元素的实时位置，计算手指实时的偏移量，将偏移量实时同步给滑屏元素；

3 版本 定位版(调整滑屏元素的left偏移量) offtleft：累加的过程 — 抽象图片的下标 — 抽象滑屏元素的位置 2d变换版(单独的图层，触发的重绘重排代价较小,利用transform,translate) translate的变换不会同步到offtleft 解决办法： — 变量，设置一个变量专门去同步translate，但是这会让业务逻辑变得复杂 — 定义css函数，一定一个css函数，专门处理transform中设置的各种变换的值 利用节点的属性来管理变换类型，及其所对应的值 2个参数：

读取操作 3个参数： 设置操作 循环节点的属性

4 无缝自动滑屏 无缝：复制一组图片，当点击第一组的第一张图片的时候，瞬间跳到第二组的第一张 当点击第二组的最后一张时，瞬间跳转到第一组的最后一张 自动滑屏：循环定时器 函数包裹(重启定时器) 清定时器(循环定时器的逻辑没有必要开启多次，暂停逻辑) 自动滑屏和无缝的冲突： 使用同一个index变量就可以 html文件中js代码如下：其中引入的cl.js文件是将动态生成结构、自动滑屏和同步translate(css函数)代码抽取出来的js文件。

<script type="text/javascript" src="js/cl.js"></script><script type=成都航空技术学校"text/javascript">  window.onload = function () {    document.addeventlistener('touchstart',function (ev) {      ev = ev || event      ev.preventdefault()    })    var arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"]    cl.caroul(arr)  }</script>

cl.js文件代码：

!(function (w) {  // 将函数绑给window的cl属性上  w.cl = {};  w.cl.css = function(node,type,val) 所有职业大全{    // 判断节点transform对象是否存在，不存在则添加    if (typeof node === "object" && typeof node["transform"] == "undefined") {      node["transform"] = {};    }    if(arguments.length >= 3){// 写操作      //设置      var text = "";      // 加入两次传入同样属性的变换，则会被覆盖      // 只会更改改变的值，之前没有改变的值则不会改变      node["transform"][type] = val;      // in操作符，会查找对象实例本身及原型链上所有的属性，可能会对后续操作产生影响      for (item in node["transform"]) {        if(node["transform"].hasownproperty(item)){          switch (item){            ca "translatex":            ca "translatey":              text += item + "(" + node["transform"][item] + "px)";              break;            ca "scale":              text += item + "(" + node["transform"][item] + ")";              break;            ca "roate":              text += item + "(" + n平面的法向量ode["transform"][item] + "deg)";              break;          }        }      }      // 兼容性问题      node.style.transform = node.style.webkittransform = text;    }el if(arguments.length == 2){      // 读操作      // 此时只传入了2个参数，第3个参数并没有用上，所以可以利用未使用的第3个参数返回结果      val = node["transform"][type];      if (typeof val === 'undefined'){        switch (type){          ca "translatex":          ca "translatey":          ca "rotate":            val = 0;            break;          ca "scale":            val = 1;            break;        }      }      return val;    }  }  w.cl.caroul = function (arr) {    // 布局    var carou蛰读音lwrap = document.querylector(".caroul-wrap");    if(caroulwrap){      var pointslength = arr.length;      // 无缝      var needcaroul = caroulwrap.getattribute('needcaroul');      needcaroul = needcaroul == null fal:true;      //console.log(needcaroul);      if(needcaroul){        arr = arr.concat(arr);      }      var ulnode = document.createelement('ul');      var stylenode = document.createelement('style')      ulnode.classlist.add('list'); 广州游玩     for(var i=0;i