当前位置： 移动技术网 > IT编程>网页制作>CSS > 移动端无缝滑屏实现教程

移动端无缝滑屏实现教程

2018年12月06日  | 移动技术网IT编程  | 我要评论

移动端无缝滑屏实现

 1 布局 布局的包裹器：占满视口的宽度 滑屏元素(动态生成，根据图片的数量)
注意：1、queryselector获取的是静态列表，动态添加元素后要重新获取一遍
            2、有时候绘制跟不上js引擎的绘制，解决方法：定时器
2 基本滑屏 拿到元素和手指一开始(点击到布局包裹器上时)的位置； 拿到元素的实时位置，计算手指实时的偏移量，将偏移量实时同步给滑屏元素；
3 版本 定位版(调整滑屏元素的left偏移量) offsetleft：累加的过程 -- 抽象图片的下标 -- 抽象滑屏元素的位置 2d变换版(单独的图层，触发的重绘重排代价较小,利用transform,translate) translate的变换不会同步到offsetleft 解决办法： -- 变量，设置一个变量专门去同步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.carousel(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){
            case "translatex":
            case "translatey":
              text += item + "(" + node["transform"][item] + "px)";
              break;
            case "scale":
              text += item + "(" + node["transform"][item] + ")";
              break;
            case "roate":
              text += item + "(" + node["transform"][item] + "deg)";
              break;
          }
        }
      }
      // 兼容性问题
      node.style.transform = node.style.webkittransform = text;
    }else if(arguments.length == 2){
      // 读操作
      // 此时只传入了2个参数，第3个参数并没有用上，所以可以利用未使用的第3个参数返回结果
      val = node["transform"][type];
      if (typeof val === 'undefined'){
        switch (type){
          case "translatex":
          case "translatey":
          case "rotate":
            val = 0;
            break;
          case "scale":
            val = 1;
            break;
        }
      }
      return val;
    }
  }
  w.cl.carousel = function (arr) {
    // 布局
    var carouselwrap = document.queryselector(".carousel-wrap");
    if(carouselwrap){
      var pointslength = arr.length;

      // 无缝
      var needcarousel = carouselwrap.getattribute('needcarousel');
      needcarousel = needcarousel == null false:true;
      //console.log(needcarousel);
      if(needcarousel){
        arr = arr.concat(arr);
      }
      var ulnode = document.createelement('ul');
      var stylenode = document.createelement('style')
      ulnode.classlist.add('list');
      for(var i=0;i

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网