简单实现拖动轮播

信仰34864

已于 2022-08-15 22:26:26 修改

阅读量929

点赞数 2

分类专栏：前端文章标签： html css js

于 2022-08-15 22:07:15 首次发布

本文链接：https://blog.csdn.net/hai_sir/article/details/126355319

版权

这篇博客介绍了如何在移动端使用HTML、CSS和JS简单实现触摸拖动的轮播图。通过设置图片可视区域和包裹图片的大盒子，通过监听触摸事件移动大盒子位置来达到轮播效果。完整代码可供参考，适合初学者理解和实践。

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

当我们写移动端的时候经常会碰到的轮播图，今天从触摸拖动的角度来简单实现一下

HTML

<div class="view">
    <div class="banner">
        <div style="background-color: blue;">1</div>
        <div style="background-color: yellow;">2</div>
        <div style="background-color: red;">3</div>
        <div style="background-color: blue;">1</div>
    </div>
</div>

CSS

<style>
    * {
        margin: 0;
        padding: 0;
      }

    .view {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        font-size: 50px;
        color: #fff;
        overflow: hidden;
     }

     .banner {
        display: flex;
     }

     .banner div {
        width: 500px;
        height: 500px;
        /* 为了让div在弹性布局之后不被压缩 */
        flex-shrink: 0;
      }
</style>

JS

<script>
    var num = 0;
    var x1, y1;
    $('.view').on('touchstart', function () {
        console.log(event);
        // 触摸开始位置
        x1 = event.changedTouches[0].clientX;
        // y1 = event.changedTouches[0].clientY;
    })

    $('.view').on('touchend', function () {
         console.log(event);
         // 触摸结束位置
         var x2 = event.changedTouches[0].clientX;
         // v