移动端— Touch事件轮播图

约定不等于承诺〃 2023-10-11 13:16 80阅读 0赞

　　　虽然 以前也写过手机端页面 。当时用的jquery moblie 框架。啥也不懂 就知道复制粘贴出效果 不敢改内部样式。现在呢 了解手机端原理 一些基本的概念 视口 缩放 后 。再去想以前写的页面 套框架 显然得心应手了不少。

手机移动端轮播 原生js

代码：

  1. let banner = document.querySelector('.jd_banner')
  2.     let imgbox = banner.querySelector('ul:first-of-type')//第一个ul
  3.     let first = imgbox.querySelector('li:first-of-type')
  4.     let last = imgbox.querySelector('li:last-of-type')
  5.     //插入
  6.     // 最后的位置           //复制一个
  7.     imgbox.appendChild(first.cloneNode(true))
  8.     //开始的位置
  9.     imgbox.insertBefore(last.cloneNode(true), imgbox.firstChild)
  10.     let lilist = imgbox.children
  11.     let bannerWidth = banner.offsetWidth;
  12.     imgbox.style.width = lilist.length * bannerWidth + 'px'
  13.     for (let i = 0; i < lilist.length; i++) {
  14.         lilist[i].style.width = imgbox.offsetWidth / lilist.length + 'px'
  15.     }
  16.     imgbox.style.left = -bannerWidth + 'px'
  18.     let index = 1;
  19.     //屏幕大小改变
  20.     window.onresize = function () {
  21.         bannerWidth = banner.offsetWidth;
  22.         imgbox.style.width = lilist.length * bannerWidth + 'px'
  23.         for (let i = 0; i < lilist.length; i++) {
  24.             lilist[i].style.width = imgbox.offsetWidth / lilist.length + 'px'
  25.         }
  26.         imgbox.style.left = (-index * bannerWidth) + 'px'
  28.     }
  29.     let bannerIndex = document.querySelector('.jd_bannerIndex')
  31.     function active(i) {
  32.         for (let j = 0; j < bannerIndex.children.length; j++) {
  33.             bannerIndex.children[j].className = ''
  34.         }
  35.         bannerIndex.children[i].className = 'active'
  36.     }
  37.     function banntime(){
  38.         index++
  39.         imgbox.style.transition = 'left 0.5s ease-in-out'
  41.         imgbox.style.left = (-index * bannerWidth) + 'px'
  42.         if (index == lilist.length - 1) {
  43.             active(0)
  44.             index = 1
  45.             setTimeout(function () {
  47.                 imgbox.style.transition = 'none'
  49.                 active(index - 1)
  50.                 imgbox.style.left = (-index * bannerWidth) + 'px'
  52.             }, 500)
  53.         }
  54.         active(index - 1)
  55.     }
  56.     let bannerInt = setInterval(banntime, 2000)
  58.     let startX, moveX, distanceX;
  60.     imgbox.addEventListener('touchstart', function (e) {
  61.         startX = e.targetTouches[0].clientX
  62.         clearInterval(bannerInt)
  63.     })
  65.     imgbox.addEventListener('touchmove', function (e) {
  66.         moveX = e.targetTouches[0].clientX
  67.         distanceX = moveX - startX
  68.         imgbox.style.left = (-index * bannerWidth + distanceX) + 'px'
  69.     })
  71.     imgbox.addEventListener('touchend', function (e) {
  72.         imgbox.style.transition = 'left 0.5s ease-in-out'
  73.         let drX = distanceX % bannerWidth
  74.         if (Math.abs(drX) > bannerWidth / 2) {
  75.             if (drX > 0) {
  76.                 index--
  77.             } else {
  78.                 index++
  79.             }
  80.             if (index == 0) {
  81.                 index = 8
  82.                 imgbox.style.transition = 'none'
  83.             }
  84.             if (index == lilist.length - 1) {
  85.                 index = 1
  86.                 imgbox.style.transition = 'none'
  87.             }
  88.         }
  89.         active(index - 1)
  90.         imgbox.style.left = (-index * bannerWidth) + 'px'
  91.         bannerInt=setInterval(banntime,2000)
  93.     })

　　效果：

797834-20190522095739376-1696498438.gif

总结 ：

不管什么框架库，还是基本很重要 了解原理 才能得心应手

转载于:https://www.cnblogs.com/ruogu/p/10904134.html

发表评论

表情：
评论列表 （有 0 条评论，80人围观）

还没有评论，来说两句吧...

相关阅读