移动端— Touch事件轮播图

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

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

手机移动端轮播 原生js

代码：

let banner = document.querySelector('.jd_banner')
        let imgbox = banner.querySelector('ul:first-of-type')//第一个ul
        let first = imgbox.querySelector('li:first-of-type')
        let last = imgbox.querySelector('li:last-of-type')
        //插入
        // 最后的位置           //复制一个
        imgbox.appendChild(first.cloneNode(true))
        //开始的位置
        imgbox.insertBefore(last.cloneNode(true), imgbox.firstChild)
        let lilist = imgbox.children
        let bannerWidth = banner.offsetWidth;
        imgbox.style.width = lilist.length * bannerWidth + 'px'
        for (let i = 0; i < lilist.length; i++) {
            lilist[i].style.width = imgbox.offsetWidth / lilist.length + 'px'
        }
        imgbox.style.left = -bannerWidth + 'px'
    
        let index = 1;
        //屏幕大小改变
        window.onresize = function () {
            bannerWidth = banner.offsetWidth;
            imgbox.style.width = lilist.length * bannerWidth + 'px'
            for (let i = 0; i < lilist.length; i++) {
                lilist[i].style.width = imgbox.offsetWidth / lilist.length + 'px'
            }
            imgbox.style.left = (-index * bannerWidth) + 'px'
    
        }
        let bannerIndex = document.querySelector('.jd_bannerIndex')
    
        function active(i) {
            for (let j = 0; j < bannerIndex.children.length; j++) {
                bannerIndex.children[j].className = ''
            }
            bannerIndex.children[i].className = 'active'
        }
        function banntime(){
            index++
            imgbox.style.transition = 'left 0.5s ease-in-out'
    
            imgbox.style.left = (-index * bannerWidth) + 'px'
            if (index == lilist.length - 1) {
                active(0)
                index = 1
                setTimeout(function () {
    
                    imgbox.style.transition = 'none'
    
                    active(index - 1)
                    imgbox.style.left = (-index * bannerWidth) + 'px'
    
                }, 500)
            }
            active(index - 1)
        }
        let bannerInt = setInterval(banntime, 2000)
    
        let startX, moveX, distanceX;
    
        imgbox.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].clientX
            clearInterval(bannerInt)
        })
    
        imgbox.addEventListener('touchmove', function (e) {
            moveX = e.targetTouches[0].clientX
            distanceX = moveX - startX
            imgbox.style.left = (-index * bannerWidth + distanceX) + 'px'
        })
    
        imgbox.addEventListener('touchend', function (e) {
            imgbox.style.transition = 'left 0.5s ease-in-out'
            let drX = distanceX % bannerWidth
            if (Math.abs(drX) > bannerWidth / 2) {
                if (drX > 0) {
                    index--
                } else {
                    index++
                }
                if (index == 0) {
                    index = 8
                    imgbox.style.transition = 'none'
                }
                if (index == lilist.length - 1) {
                    index = 1
                    imgbox.style.transition = 'none'
                }
            }
            active(index - 1)
            imgbox.style.left = (-index * bannerWidth) + 'px'
            bannerInt=setInterval(banntime,2000)
    
        })

效果：

![797834-20190522095739376-1696498438.gif][]

总结 ：

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

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

[797834-20190522095739376-1696498438.gif]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190522095739376-1696498438.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

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

相关阅读

相关移动端— Touch事件轮播图

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

约定不等于承诺〃/ 2023年10月11日 13:16/ 0 赞/ 25 阅读

相关移动端网页轮播图

文章目录一、触屏事件 1.触屏事件概述 2.触屏事件对象 3. 拖动元素二、

旧城等待，/ 2023年09月26日 11:05/ 0 赞/ 26 阅读

相关手机移动端-touch 手指触摸移动事件

touch：事件可以分为三个 touchstart，touchmove，touchend <!DOCTYPE html> <html lang="en">

缺乏、安全感/ 2022年12月22日 13:24/ 0 赞/ 238 阅读

相关移动端轮播图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2022年10月25日 14:04/ 0 赞/ 210 阅读

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

你的名字/ 2022年10月07日 12:46/ 0 赞/ 310 阅读

相关移动端web开发---Touch事件详解

一、pc端事件回顾 HTML事件、DOM0事件、DOM2事件事件对象。如果上述概念不清楚，请先去了解。二、移动端事件简介 2.1 pc端事件在移动端的

╰+攻爆jí腚メ/ 2022年06月15日 09:18/ 0 赞/ 549 阅读

相关移动端 - touch事件

touch 事件在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式 `touchstart` 手指触碰

矫情吗；*/ 2022年05月19日 07:21/ 0 赞/ 297 阅读

相关原生 js 实现移动端 Touch 轮播图

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

秒速五厘米/ 2022年03月30日 20:39/ 0 赞/ 286 阅读

相关移动端轮播

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont

谁践踏了优雅/ 2022年02月02日 02:39/ 0 赞/ 274 阅读

相关 vue移动端touch事件

开始事件： @touchstart 移动事件： @touchmove 结束事件： @touchend // 获取事件对象 @touchend="touc

约定不等于承诺〃/ 2021年12月11日 05:37/ 0 赞/ 480 阅读