移动端事件（二）—— 移动端滑屏切换的幻灯片

最新推荐文章于 2021-06-05 12:20:40 发布

白菜new

最新推荐文章于 2021-06-05 12:20:40 发布

阅读量390

点赞数 2

分类专栏：移动端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43850819/article/details/105302083

版权

本文通过原生JavaScript实现移动端滑屏幻灯片，详细讲解了滑屏效果的制作、动画添加、无缝滚动的原理及实现，以及如何处理用户滑动时的冲突，确保幻灯片和滚动条的正确交互。

摘要由CSDN通过智能技术生成

经过昨天对移动端基础的了解，今天就来用原生JS实现一下我们的幻灯片。

因为是用原生实现，所以本文篇幅较长，各位看官只需理解思路即可，代码部分可以粗略看看。

毕竟我们有better-scroll这样封装好的框架能更快速实现效果。b（￣▽￣）d

首先根据我们昨天的滑屏操作，先将幻灯片的滑屏效果做出来。这里大家将照片地址更换成自己的就能得到效果。

案例要在客户端才有效果哦，如果在PC端，网页中右键点审查，控制器旁边有个手机图标，点击下图这个也能有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
    
            font-size: 10vw;
        }
        body {
    
            margin: 0;
        }
        ul {
    
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap {
    
            position: relative;
            width: 100vw;
            overflow: hidden;
        }
        #list {
    
            float: left;
            display: flex;
            display: -webkit-box;
        }
        #list li {
    
            flex: none;
            width: 100vw;
        }
        #list img {
    
            width: 100%;
            display: block;
        }
        .nav {
    
            position: absolute;
            left: 0;
            bottom: .2rem;
            width: 100%;
            text-align: center;
            vertical-align: top;
        }
        .nav a {
    
            display: inline-block;
            width: .3rem;
            height: .3rem;
            background: #fff;
            margin: 0 .1rem;
            border-radius: .15rem;
            transition: .3s;
        }
        .nav .active {
    
            width: .6rem;  
            color: #fff;  
        }
    </style>
</head>
<body>  
<div id="wrap">
    <ul id="list">
        <li><img src="img/banner01.png" /></li>
        <li><img src="img/banner02.png" /></li>
        <li><img src="img/banner03.png" /></li>
        <li><img src="img/banner04.png" /></li>
    </ul>
    <nav class="nav">
        <a class="active"></a><a></a><a></a><a></a>
    </nav>
</div>  
<script>
 // 幻灯片效果   
{
    
    let wrap = document.querySelector("#wrap");
    let list = document.querySelector("#list");
    let navs = document.querySelectorAll(".nav a");
    let translateX = 0; //元素的移动位置
    let startPoint = {