移动端轮播图实现

最新推荐文章于 2024-06-27 19:48:27 发布
最新推荐文章于 2024-06-27 19:48:27 发布
阅读量869 收藏 4
点赞数 1
文章标签： js css3 html5 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LBY_XK/article/details/117562907
版权

轮播图（移动端）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>phoneswiper</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        
        .cont {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 100px;
        }
        
        .cont ul {
            padding: 0;
            margin: 0;
            margin-left: -100%;
            width: 500%;
            height: 100px;
        }
        
        .cont ul li {
            float: left;
            width: 20%;
            height: 100px;
            list-style: none;
        }
        
        .cont ul li div {
            width: 100%;
            height: 100px;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            background-color: #ccc;
        }
        
        .cont ol {
            padding: 0;
            margin: 0;
            position: absolute;
            right: 10px;
            bottom: 10px;
            list-style: none;
        }
        
        .cont ol li {
            float: left;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            background-color: red;
            border-radius: 10px;
            transition: all .3s;
        }
        
        .cont ol .current {
            width: 15px;
        }
    </style>
</head>

<body>
    <div class="cont">
    //轮播对象
        <ul>
            <li>
                <div class="img">3</div>
            </li>
            <li>
                <div class="img">1</div>
            </li>
            <li>
                <div class="img">2</div>
            </li>
            <li>
                <div class="img">3</div>
            </li>
            <li>
                <div class="img">1</div>
            </li>
        </ul>
        //小圆点
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <script>
        var ul = document.querySelector('ul');
        var li = ul.querySelector('li');
        var ol = document.querySelector('ol')
        var liwidth = li.offsetWidth;
        var index = 0;
        var timer = setInterval(function() {
            // 计算步长
            index++;
            var movex = -index * liwidth;
            // 设置过度效果  进行移动
            ul.style.transition = 'all .3s'
            ul.style.transform = 'translateX(' + movex + 'px)'
        }, 1000)
        ul.addEventListener('transitionend', function() {
            // 监测过度完成，并执行无缝衔接
            if (index >= ul.children.length - 2) {
                index = 0;
                ul.style.transition = 'none'
                var movex = -index * liwidth;
                // 设置过度效果  进行移动
                ul.style.transform = 'translateX(' + movex + 'px)'

            } else if (index < 0) {
                index = 2;
                ul.style.transition = 'none'
                var movex = -index * liwidth;
                // 设置过度效果  进行移动
                ul.style.transform = 'translateX(' + movex + 'px)'
            }
            // 小圆点动态变化
            ol.querySelector('.current').classList.remove('current');
            ol.children[index].classList.add('current')
        })

        // 手指拖动轮播图事件
        var startX = 0; //接收手位置
        var move = 0; //移动距离
        var flag = false; //判断手指是否移动
        ul.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            clearInterval(timer)
        })
        ul.addEventListener('touchmove', function(e) {
            move = e.targetTouches[0].pageX - startX;
            var movex = -index * liwidth + move;
            ul.style.transition = 'none'
                // 设置过度效果  进行移动
            ul.style.transform = 'translateX(' + movex + 'px)';
            flag = true;
            e.preventDefault(); //阻止滚动屏幕的默认行为
        })

        // 手指离开播方下一张或上一张图片
        ul.addEventListener('touchend', function(e) {
            if (flag) {
                // 滑动距离 判断下一张
                if (Math.abs(move) > 50) {
                    // right
                    if (move > 0) {
                        index--;
                    } else {
                        // left
                        index++;
                    }
                    var movex = -index * liwidth;
                    ul.style.transition = 'all .3s'
                        // 设置过度效果  进行移动
                    ul.style.transform = 'translateX(' + movex + 'px)'
                    timer = setInterval
                } else {
                    var movex = -index * liwidth;
                    ul.style.transition = 'all .1s'
                        // 设置过度效果  进行移动
                    ul.style.transform = 'translateX(' + movex + 'px)'
                }
            }
            //重启定时器
            clearInterval(timer)
            timer = setInterval(function() {
                // 计算步长
                index++;
                var movex = -index * liwidth;
                // 设置过度效果  进行移动
                ul.style.transition = 'all .3s'
                ul.style.transform = 'translateX(' + movex + 'px)'
            }, 1000)

        })
    </script>
</body>

</html>

在这里插入图片描述

LBY_XK
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
移动端实现轮播图
qq_14815199的博客
05-03 3218
一段调试过的移动端轮播图代码
移动端轮播图
官方推荐
02-25 825
1. 页面布局 1.1 页面框架 <body> <div class="box"> <div class="tupian"> <img src="4.webp" alt=""> <img src="1.webp" alt=""> <img...
移动端原生js封装轮播图和大图预览组件
最新发布
2301_78320134的博客
06-27 166
移动端的轮播图组件加大图预览组件原生js实现 非常简单易懂，轮播图和大图预览是同一个组件 复用性强 。
移动端的轮播图
YW博客
09-09 1142
移动端轮播图有两种方法， 1.第一种用图片盒子的left值来控制 2.第二种用transform中的translateX来改变translateX只是让盒子在原来位置上移动多少距离，不会改变盒子的left值，而且，每次移动都是从原始的left值开始移动，不会从当前位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
js实现移动端轮播图效果
10-19
在描述中提到，本文为读者提供了一个移动端轮播图实现的实例代码，具有一定的参考价值。这意味着，本文不仅理论分析，还包含了具体代码实现，让读者可以直接参考，并在自己的项目中应用。 在标签“js 移动端 轮播图...
携程_携程移动端_移动端轮播图_源码
10-01
【移动端轮播图实现原理与携程案例分析】 在移动互联网时代，用户界面的交互性和视觉效果成为了吸引用户的重要因素，而移动端轮播图作为一种常见的网页元素，被广泛应用于各种应用程序和网站，包括携程移动端。它...
js实现移动端轮播图
10-17
以下是一个关于如何使用JavaScript实现移动端轮播图的详细解释。 首先，我们来看一下HTML结构。一个简单的轮播图会包含一个容器元素，如`<div class="jd_banner">`，以及一系列的图片列表项，这些列表项通常包裹在`...
移动端轮播图.rar
04-21
移动端轮播图是一种常见的网页和应用设计元素，用于在有限的空间内展示多个图像或内容，常见于电商首页、产品展示、新闻聚合等场景。在移动设备上，由于屏幕尺寸有限，设计良好的轮播图能够有效地利用空间，提高用户...
移动端轮播图实现方法（dGun.js）
weixin_33734785的博客
10-19 270
本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源码。 HTML部分 <div class="outer" id="oneTest"> <div class="inner"&...
移动端可滑动轮播图
02-24
很实用的移动端可滑动轮播图代码，有多种类型供选择
jq移动端轮播图
04-06
jq移动端轮播图
WebAPI第五天学习总结—— 移动端常见特效（轮播图）
weixin_52819925的博客
08-18 264
移动端常见特效 案例: 移动轮播图 需求：移动端轮播图功能和基本PC端一致 可以自动播放图片 手指可以拖动播放轮播图 案例分析： 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 思路： 自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0 此时图片，去掉过渡效果，
移动端网页轮播图
m0_52861684的博客
10-12 3197
移动端网页轮播图，不必考虑兼容性问题，CSS两个属性实现元素的动画效果及缓冲特效，通过 classList 属性移除、添加类名，轻松实现小圆点的跟随效果。
实现移动端轮播图
weixin_30672295的博客
12-28 248
1、移动端实现滑动切换轮播图，主要由touch（touchstart,touchmove,touchend）事件实现。在touch事件中可以通过 e.touches[0].clientX获取当前触摸点的位置，在touchend事件中没有e.touches[0].clientX值 var banner=function(){ /* *1、无缝滚动和无缝滑动 *2、点盒子对应改变...
移动端---js效果--轮播图
XUELUO123456789的博客
05-15 442
一.轮播图的过程 移动端中的轮播图 ----通过transition过渡和translateX() ----当最后一张图片过渡结束时或者第一张往右移动，将索引改变 ----transitionend----过渡结束时触发，改变索引 ----animationend----动画结束时触发 ----此时清除过渡效果；transition=“none”;translate=“none” 改变位置 ---...
帮我完成移动端轮播图
06-07
移动端轮播图可以使用原生JS和CSS3来实现。下面提供一个例子[^1]，帮助你完成移动端轮播图： 1. HTML结构 ```html <div class="container"> <div class="img-box"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> <img src="4.jpg" alt=""> </div> <div class="dot-box"> <span></span> <span></span> <span></span> <span></span> </div> </div> ``` 2. CSS样式 ```css .container { width: 100%; overflow: hidden; position: relative; } .img-box { display: flex; width: 400%; transition: all .5s; } .img-box img { width: 25%; } .dot-box { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .dot-box span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background-color: #fff; opacity: .5; cursor: pointer; } .dot-box span.active { opacity: 1; } ``` 3. JavaScript代码 ```javascript var container = document.querySelector('.container'); var imgBox = document.querySelector('.img-box'); var dots = document.querySelectorAll('.dot-box span'); var index = 0; var timer = null; var startX = 0; var startY = 0; var moveX = 0; var moveY = 0; var distanceX = 0; var distanceY = 0; // 自动轮播 timer = setInterval(function() { index++; if (index > 3) { index = 0; } changeImage(); }, 2000); // 触摸事件 container.addEventListener('touchstart', function(e) { clearInterval(timer); startX = e.touches.clientX; startY = e.touches.clientY; }); container.addEventListener('touchmove', function(e) { moveX = e.touches.clientX; moveY = e.touches.clientY; distanceX = moveX - startX; distanceY = moveY - startY; imgBox.style.transform = 'translateX(' + (-index * 100 - distanceX) / 4 + '%)'; }); container.addEventListener('touchend', function(e) { if (Math.abs(distanceX) > 50) { if (distanceX > 0) { index--; if (index < 0) { index = 3; } } else { index++; if (index > 3) { index = 0; } } } changeImage(); timer = setInterval(function() { index++; if (index > 3) { index = 0; } changeImage(); }, 2000); }); // 点击事件 dots.forEach(function(dot, i) { dot.addEventListener('click', function() { index = i; changeImage(); }); }); // 切换图片和小圆点的样式 function changeImage() { imgBox.style.transform = 'translateX(' + (-index * 100) + '%)'; dots.forEach(function(dot) { dot.classList.remove('active'); }); dots[index].classList.add('active'); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LBY_XK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值