Of Stack

js Realizes Sliding Switching of Carousel Map at Mobile Terminal

  • 2021-10-15 09:35:29
  • OfStack

In this paper, we share the specific code of js to realize the sliding switching of mobile carousel map for your reference. The specific contents are as follows

Mobile gesture

Carousel map analysis

1. Automatic carousel and seamless [timer, transition animation]
2. The pager should change with the carousel of pictures [switch according to index]
3. Sliding effect [touch event]
4. The picture changes with the pager
5. At the end of sliding, if the sliding distance does not exceed 1/3 of the screen, resume [transition]
6. At the end of sliding, if the sliding distance exceeds 1/3 of the screen, switch [sliding direction + transition]]

html page structure 


<!-- Carousel chart -->
 <div class="jd_banner">
  <ul class="clearfix">
  <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l2.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l3.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l4.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l5.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l6.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l7.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
  </ul>
  <ul class="clearfix">
  <li class="now"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
</div>

js section 


/*  Dynamic setting transition  */
var addTransition = function (ele) {
 ele.style.transition = "all .6s";
 ele.style.webkitTransition = "all .6s";
};
/*  Remove Transition Effect  */
var removeTransition = function (ele) {
 ele.style.transition = "none";
 ele.style.webkitTransition = "none";
};
/*  Set container translation  --  That is, sliding animation  
 ele: Current element 
 xwidth: Distance of translation 
*/
var setTranslateX = function (ele, xwidth) {
 ele.style.transform = "translateX(" + xwidth + "px)";
 ele.style.webkitTransform = "translateX(" + xwidth + "px)";
}

var banner = function () {
 /** 轮播图分析 */
 /** 1 自动轮播且无缝 [定时器、过渡动画]
 * 2 点要随着图片的轮播而改变 [根据索引切换]
 * 3 滑动效果 [touch事件]
 * 4 图片随着点而变化
 * 5 滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]
 * 6 滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]]
 */
 var timer = ''
 /* 封装定时器函数 */
 var startInterval = function () {
 timer = setInterval(function () {
  index++;// 基于索引 做位移
  addTransition(imgBox); // 为轮播图片组的ul设置过渡函数
  setTranslateX(imgBox, -index * width);// 根据当前索引值计算平移的距离
 }, 2000);
 }
 var banner = document.querySelector(".jd_banner");
 var width = banner.offsetWidth; // 屏幕的宽度
 var imgBox = banner.querySelector("ul:first-child"); // 轮播图片ul
 var length = imgBox.querySelectorAll("li").length; // 图片的个数
 var pointBox = banner.querySelector("ul:last-child");// 分页器ul
 var points = pointBox.querySelectorAll("li");// 分页器集合

 var index = 1; // 初始化索引，由于要无缝衔接，索引从1开始
 startInterval();
 
 /* transitionend事件：当元素过渡动画结束后执行
 每次轮播动画结束后，判断当前索引值
 */
 imgBox.addEventListener("transitionend", function () {
 if (index >= length - 1) {
  index = 1;
  // 清过渡，瞬间定位imgBox 
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 // 滑动的时候也需要无缝
 else if (index <= 0) {
  index = 8;
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 showPoint(index - 1); // 改变分页器状态
 });

 var showPoint = function (index) {
 for (var i = 0; i < points.length; i++) {
  points[i].className = '';
 }
 points[index].className = "now";
 };
 /* 滑动切换 (touch事件) */
 var startX = 0; // 触摸起始点
 imgBox.addEventListener("touchstart", function (e) {
 // 记录起始位置的X坐标
 clearInterval(timer);
 startX = e.touches[0].clientX;
 });
 var distanceX = 0;
 var translateX = 0;
 // **** 加1个标识，判断用户有没有滑动
 var isMove = false
 imgBox.addEventListener("touchmove", function (e) {
 var moveX = e.touches[0].clientX;
 // 计算位移,有正负方向
 distanceX = moveX - startX;
 // 计算目标元素的位移
 // 元素将要的定位 = 当前定位 + 手指移动的距离
 translateX = -index * width + distanceX;
 // ********** 要想图片实时地跟着手指走，1定要把过渡清楚掉
 removeTransition(imgBox)
 setTranslateX(imgBox, translateX);
 isMove = true;// 确定用户有滑动
 e.preventDefault(); // 去除移动端浏览器默认的滑动事件
 });

 imgBox.addEventListener("touchend", function (e) {
 if (isMove) {
  if (Math.abs(distanceX) > width / 3) {
  // 切换
  if (distanceX > 0) {
   // 上1张
   index = index - 1;
  } else {
   // 下1张
   index = index + 1;
  }
  addTransition(imgBox); // 设置过渡动画
  setTranslateX(imgBox, -index * width);
  if (index >= 9) {
   index = 1;
  }
  if (index <= 0) {
   index = 8;
  }
  showPoint(index - 1);

  } else {
  // 不满足滑动条件，回退到之前的状态
  addTransition(imgBox);
  setTranslateX(imgBox, -index * width);
  showPoint(index - 1);
  }
 }
 // **** 最好做1次参数的重置
 startX = 0;
 distanceX = 0;
 isMove = false;
 // ****** 为了严谨，再清1次定时器
 clearInterval(timer)
 // 加上定时器
 startInterval();
 });
};

Summarize

Native js mainly uses gesture events on the mobile terminal to realize sliding handover

touchstart triggers when a finger touches the screen touchmove triggers when the finger slides across the screen touchend triggers when the finger leaves the screen

Using touch related events to achieve the mobile side common sliding effect and mobile side common gesture events.

And the underlying implementation principle of swiper plug-in is also this, so it is best to use swiper plug-in for rapid development

Related articles: