资讯专栏INFORMATION COLUMN

移动端横向滑屏之轮播图

Hydrogen / 2989人阅读

摘要:图片描述移动端的轮播图可以有很多方式实现,最常见的可以使用定位手指事件。四手指移入移出开关定时器

图片描述

移动端的轮播图可以有很多方式实现,最常见的可以使用定位 + 手指事件。但是我这里介绍的是 CSS3 中的 2d 变换和手指事件,因为变换属性的代码更加简洁优雅

一. 移动端的准备工作
* {
    padding: 0;
    margin: 0;
}
img {
    display: block;
}
li {
    list-style: none;
}
input {
    outline: none;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body {
    height: 100%;
    overflow: hidden;
}

CSS 中的初始化

       // 阻止浏览器的默认行为
        document.addEventListener("touchstart", function(event) {
            event.preventDefault()
        });
        
        // rem 适配
        (function() {
            var styleNode = document.createElement("style")
            var width = document.documentElement.clientWidth
            styleNode.innerHTML = "html {font-size: "+ width/16 +"px;}"
            document.head.appendChild(styleNode)
        })();
        
        // 点透
        (function() {
            var aNodes = document.querySelectorAll("a")
            for (var i = 0; i < aNodes.length; i++) {
                aNodes[i].addEventListener("touchstart", function() {
                    window.location.href = this.href
                })
            }
        })();

这里移动端写页面之前跟 PC 端有些不同,设计师给我们的像素值可能与移动设备不匹配,首先要进行rem 适配,还有阻止浏览器的默认行为,通常情况下,还有处理点透。

二. 基本手指事件
        
        
var list = document.querySelector(".list") var li = document list.innerHTML += list.innerHTML var startX = 0 var eleX = 0 var translateX = 0 var now = 0 list.addEventListener("touchstart", function(event) { list.style.transition = "none" if (now == 0){ now = 5 } else if (now == 9) { now = 4 } transformCss(list,"translateX",-now*document.documentElement.clientWidth) var touch = event.changedTouches[0] startX = touch.clientX eleX = transformCss(list, "translateX") }) list.addEventListener("touchmove", function(event) { var touch = event.changedTouches[0] var endX = touch.clientX var disX = endX - startX translateX = disX + eleX // 清除过渡 list.style.transition = "none" list.style.transform = transformCss(list,"translateX",translateX) }) list.addEventListener("touchend", function() { var left = transformCss(list, "translateX") now = Math.round(-left / document.documentElement.clientWidth) translateX = -now * document.documentElement.clientWidth list.style.transition = "0.5s" transformCss(list,"translateX",translateX) })

这里设计的无缝轮播很巧妙,把图片的 li 标签复制了一份,也就是总共 10 张图,当滑到 1 图时,我们在点击后迅速切到第 6 张,当滑到最后一张图时,切换到第 5 张。

三. 自动轮播 + 小圆点逻辑
    var autoSlide = function() {
        setInterval(function() {
            if(now == 9) {
                now = 4
            }
            list.style.transition = "none"
            transformCss(list, "translateX", -now * document.documentElement.clientWidth)

            // 设置一个延时,让过渡生效
            setTimeout(function() {
                now++
                list.style.transition = "0.5s"
                transformCss(list, "translateX", -now * document.documentElement.clientWidth)
                for(var i = 0; i < spans.length; i++) {
                    spans[i].classList.remove("active")
                }
                spans[now % 5].classList.add("active")
            }, 20)

        }, 1000)
    }

这里自动轮播有几个逻辑

轮播的同时,小圆点跟着动,排他思想,先移走所有小圆点的类名,再多带带添加

轮播到 10 张时,快速切换到第 5 张图,由于所有的滑动都是采用过渡,快速切换采用的清除过渡,所以要设置一个短暂的延时,让清除过渡不被覆盖。

四. 手指移入移出开关定时器

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99587.html

相关文章

  • vue组件之轮播图实现

    摘要:预览地址图片的轮播假设需要轮播三张图片,以前的思路就如图所示,添加两个节点。通过索引的切换实现组件的无缝轮播。这样子父组件就可以通过钩子和来实时通知子组件,从而控制内容的展示。这个判断只需让子组件来做就行了。 预览地址 图片的轮播 showImg(https://segmentfault.com/img/remote/1460000018606875?w=1440&h=900); 假设...

    xuweijian 评论0 收藏0
  • Transition 实现轮播图

    摘要:关于轮播图的实现算是前端的一个基础,其实实现起来是很简单,这里把实现的基本思路总结一下。推荐使用,它是一款开源的移动端脚本框架,它可以完美的实现在移端开发的大多数事件,如点击滑动拖动多点触控等事件。 关于轮播图的实现算是前端的一个基础,其实实现起来是很简单,这里把实现的基本思路总结一下。轮播图的实现方案有很多种方式,可以用纯js来实现,也可用css来实现,我们这里主要用到了css3的过...

    pf_miles 评论0 收藏0
  • 面试官(6): 写过『通用前组件』吗?

    摘要:很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测 很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来 往期 面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus...

    waltr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<