原生js实现移动开发轮播图、相册滑动特效

实现移动开发轮播图、相册滑动特效的核心技术是原生JS实现手势识别和滑动控制。在实现前，需要明确以下几点：

1. 滑动容器的尺寸及内部元素的数量
2. 滑动方向和速度控制
3. 原生JS实现手势识别技术

接下来，我将结合示例展开讲解：

示例一：移动轮播图

实现移动轮播图需要使用JS异步实现图片的加载和手势滑动的监听。以下是详细步骤：

第一步：布局

使用HTML布局画面容器及包含着图片的DIV，图片数量根据需求自行添加。建议设置图片的高度、宽度、水平居中等属性，以便于控制样式。

<div id="banner">
  <div id="imgs" style="width: 600px; height: 200px; margin: 0 auto; position: relative;">
    <img alt="图片1" src="img/1.jpg" />
    <img alt="图片2" src="img/2.jpg" />
    <img alt="图片3" src="img/3.jpg" />
  </div>
</div>

第二步：JS异步加载图片

使用异步加载方法，将用于轮播的图片先预加载，以便于在滑动时不需要等待图片加载完毕。

var imgs = new Array();
var imgUrls = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];

function preloadImages() {
  for (i = 0; i < imgUrls.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = imgUrls[i];
    imgs[i].onload = function() {
      console.log(i);
    };
  }
}

第三步：处理手势滑动

使用原生JS处理滑动事件，需要对滑动容器添加 touchstart、touchmove、touchend三大事件监听器，并对其中的坐标位置信息进行处理，计算出滑动方向和速度。

$(function() {
  var startX, endX, startY, endY;
  var threshold = 50;    //手势敏感度
  var el_imgs = document.getElementById("imgs");
  var len = imgUrls.length;
  var index = 0;         //当前显示图片的下标

  el_imgs.addEventListener("touchstart", function(e) {
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
  }, false);

  el_imgs.addEventListener("touchend", function(e) {
    endX = e.changedTouches[0].pageX;
    endY = e.changedTouches[0].pageY;
    var swipeLength = Math.abs(endX-startX);      //水平位移量
    var swipeHLength = Math.abs(endY-startY);     //垂直位移量

    if (swipeLength > threshold && swipeHLength < threshold) {  //判断是否水平滑动、是否超过阈值
      if (endX > startX && index > 0) {
        index--;
        slide(index*600);
      }
      if (endX < startX && index < len-1) {
        index++;
        slide(index*600);
      }
    }
  }, false);

  function slide(duration) {    //滑动函数
    var imgs = document.getElementById("imgs");
    $(imgs).animate({"left": -duration + "px"}, 400);
  }

  preloadImages();  //异步预加载图片

});

第四步：添加样式

使用CSS对图片显示的样式进行简单排版，然后对图片容器进行绝对定位。

#imgs img {
  float:left;
  width:600px;
  height:200px;
}

#imgs {
  position:absolute;
  left: 0px;
  top: 0px;
}

示例二：相册滑动特效

实现相册滑动特效需要使用JS异步实现图片的加载和手势滑动的监听，同时使用CSS对显隐以及动画效果进行控制。以下是详细步骤：

第一步：布局

使用HTML布局画面容器及包含着图片列表的DIV，图片数量根据需求自行添加。建议设置图片宽度，以便于控制样式。

<div id="photos">
  <ul id="photo-list">
    <li><img src="images/1.jpg"></li>
    <li><img src="images/2.jpg"></li>
    <li><img src="images/3.jpg"></li>
    <li><img src="images/4.jpg"></li>
    <li><img src="images/5.jpg"></li>
    <li><img src="images/6.jpg"></li>
    <li><img src="images/7.jpg"></li>
    <li><img src="images/8.jpg"></li>
    <li><img src="images/9.jpg"></li>
  </ul>
</div>

第二步：JS异步加载图片

使用异步加载方法，将用于滑动的图片先预加载，以便于在滑动时不需要等待图片加载完毕。

var imgs = new Array();
var imgUrls = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg"];

function preloadImages() {
  for (i = 0; i < imgUrls.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = imgUrls[i];
    imgs[i].onload = function() {
      console.log(i);
    };
  }
}

第三步：处理手势滑动

使用原生JS处理滑动事件，需要对滑动容器添加 touchstart、touchmove、touchend三大事件监听器，并对其中的坐标位置信息进行处理，计算出滑动方向和速度。滑动过程中需要动态设置图片列表的left值。

$(function() {
  var startX, endX, dist, tmp, el_photos, li_photos, len_li, i, j, l;

  function init() {
    el_photos = document.getElementById("photos");
    li_photos = el_photos.getElementsByTagName('li');
    len_li = li_photos.length;
    l = 0;  //初始位置下标为0；
    el_photos.addEventListener('touchstart', function(e) {
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
      el_photos.style.transition = 'all 0s';
      dist = 0;    //滑动距离为0
    }, false);
    el_photos.addEventListener('touchmove', function(e) {
      e.preventDefault();
      endX = e.touches[0].pageX;
      dist = endX-startX;     //滑动距离
      el_photos.style.left = (-l*2*10 + dist/2) + 'vw';    //滑动距离为dist的1/10
    }, false);
    el_photos.addEventListener('touchend', function(e) {
      if (dist < -20) {  // 向左滑
        l++;
        tmp = setTimeout(function() {
          el_photos.style.transition = 'all 0.3s';
          el_photos.style.left = (-l*20) + 'vw';    //设置动态过渡效果         
        }, 100);
      } else if (dist > 20) {  // 向右滑
        l--;
        tmp = setTimeout(function() {
          el_photos.style.transition = 'all 0.3s';
          el_photos.style.left = (-l*20) + 'vw';
        }, 100);
      } else {
        el_photos.style.left = (-l*20) + 'vw';
      }
    }, false);
  }

  preloadImages();
  init();
});

第四步：添加样式

使用CSS对图片显示的样式进行简单排版，然后对图片容器进行绝对定位。

#photos {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

#photo-list {
  width: calc(200% - (2 * 2vw));
  left: 0;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  z-index: -1;
}

#photo-list li {
  display: inline-block;
  width: 20vw;
  min-height: calc((100vw - 4vw) / 3);
  margin-right: 2vw;
  margin-left: 2vw;
  transition: all 0.3s;
}

#photo-list li:last-child {
  margin-right: 0;
}

至此，我们就完成了基于原生JS的移动开发轮播图、相册滑动特效。在实现过程中，需要理解手势的概念以及JS异步处理的方法。通过练习这种类型的小案例，可以帮助我们更好地掌握WenApp的特性和实现机制，从而更好地进行移动开发。