移动端网页轮播图

这篇具有很好参考价值的文章主要介绍了移动端网页轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、触屏事件

在制作移动端网页轮播图之前,我们先补充一些移动端的基本触屏事件及事件对象!

1.触屏事件概述

移动端浏览器兼容性比较好,所以我们不需要考虑以前 JS 的兼容性问题,可以放心地使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件,Android 和 IOS 都有。

移动端网页轮播图

<div></div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function() {
        console.log('yes');
    })
</script>

这里PC端变移动端按下F12键,如图点击左边第二个即可!

移动端网页轮播图

2.触屏事件对象

上面的 touchstart、touchmove、touchend 三个事件都会有各自的事件对象。

移动端网页轮播图

① 如果触摸的是同一个元素,那么前两个相同,返回的都是正在触摸该元素的手指数;
② 手指离开的时候,前两个都没有了,只有 changedTouches;
③ 最常用的是第二个 targetTouches,重点记住;
④ 可以比作一个数组,通过索引号获得相应的手指信息

3. 拖动元素

拖动元素三部曲:
(1)触摸元素 touchstart:获取手指初始坐标,同时获得盒子初始位置;
(2)移动手指 touchmove:计算手指的滑动距离,并且移动盒子;
(3)离开手指 touchend。
注意手指移动也会触发屏幕滚动,所以这里要阻止默认的屏幕滚动 e.preventDefault()。

① touchstart、touchmove、touchend 可以实现拖动元素;
② 但是拖动元素需要得到当前手指的坐标值,我们可以使用 targetTouches[0] 里面的 pageX 和 pageY;
③ 拖动原理,手指移动中,计算出手指移动的距离,然后用盒子原来的 left 加上手指移动的距离就是现在的 left;
④ 手指移动的距离等于手指滑动后的 left 减去手指刚开始触摸屏幕时的 left。

<!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>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var startX = 0;
        var startY = 0;
        var endX = 0;
        var endY = 0; 
        var x = 0;
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        div.addEventListener('touchmove', function(e) {
            var newLeft = x + e.targetTouches[0].pageX - startX;
            var newTop = y + e.targetTouches[0].pageY - startY;
            this.style.left = newLeft + 'px';
            this.style.top = newTop + 'px';
            e.preventDefault();
        })
    </script>
</body>
</html>

注意手指移动也会触发屏幕滚动,为阻止默认滚动,我们这里添加 e.preventDefault(),只让 div 移动!

二、移动端轮播图

1.案例分析

(1)自动播放
① 由于移动端兼容性较好,所以移动端想要实现轮播图的自动播放非常简单;
② 核心原理,使用 CSS 里面的 transform 和transition 属性,实现图片的滚动和过渡效果。
(2)无缝滚动
① 无缝滚动,需判断图片是否滚动到了最后一张或者是第一张,用索引号 index 去判断;
② 我们的判断条件是要等到图片滚动完毕后再去判断,此时需要添加过渡完成事件 transitionend;
③ 若滚动到最后一张,就将索引号设置为0;
④ 注意这里的索引号设置为0,但是图片此时还没有移动,在下一步图片需要立马跳到索引为0的位置,不能被看出来,所以这里不要添加过渡动画,然后移动;
⑤ 同样道理,如果索引号小于0,说明是倒着走的,也是不添加过渡地移动。
(3)小圆点跟随
① 在做小圆圈跟随图片滚动的特效前,我们先了解一下 classList 属性,返回元素的类名,该属性可以给元素添加、移除或切换类,有以下方法:

添加类,element.classList.add(‘类名’);
移除类,element.classList.remove(‘类名’);
切换类,element.classList.toggle(‘类名’);

添加类名是在后面追加类名,所以不会覆盖掉以前的类名,注意类名前面不需要加点!
② 把带有 current 类名的 li 选出来,去掉它的类名,remove;
③ 让当前索引号的 li 加上类名 current,add;
④ 小圆点跟随变化也是等到过渡结束之后变化的,所以这个部分也要写到 transitionend 事件里面。
(4)手指滑动
① 本质就是 ul 跟随手指移动,简单来说就是移动端拖动元素;
② 触摸元素 touchstart,此时获取手指初始坐标;
③ 手指移动 touchmove,计算手指的滑动距离,并且移动盒子;
④ 手指离开 touchend,根据不同的滑动距离分不同的情况实现回弹效果;
⑤ 手指触摸的时候就停止定时器;
⑥ 手指拖动的时候不需要动画效果,所以取消过渡;
⑦ 回弹效果,如果移动距离小于某个像素就回弹到原来的位置,大于某个像素就切换到下一张或上一张;
⑧ 向左滑动 moveX 就是负的,向右滑动 moveX 就是正的,而我们这里要的移动距离必须是正的,所以加绝对值,Math.abs(moveX);
⑨ 当移动距离满足该像素时,向左滑动 index++,向右滑动 index–;
⑩ 手指离开屏幕时,恢复定时器,先把原来的定时器全部清除,再开设新的定时器,继续第一步的自动播放。

2.代码实现

① 网页轮播图.html

<!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>Document</title>
    <link href="网页轮播图.css" rel="stylesheet"/>
    <script src="网页轮播图.js"></script>
</head>
<body>
    <div class="focus">
        <ul class="picture">
            <li><a><img src="picture//图5.jpg"/></a></li>
            <li><a><img src="picture//图1.jpg"/></a></li>
            <li><a><img src="picture//图2.jpg"/></a></li>
            <li><a><img src="picture//图3.jpg"/></a></li>
            <li><a><img src="picture//图4.jpg"/></a></li>
            <li><a><img src="picture//图5.jpg"/></a></li>
            <li><a><img src="picture//图1.jpg"/></a></li>
        </ul>
        <ol class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="current"></li>
        </ol>
    </div>
</body>
</html>

② 网页轮播图.css

* {
    margin: 0;
    padding: 0;
}
.focus {
    position: relative;
    width: 400px;
    height: 150px;
    margin: 50px auto;
    overflow: hidden;
}
.picture {
    position: absolute;
    top: 0;
    left: -400px;
    width: 700%;
}
.picture li {
    float: left;
    list-style: none;
}
.picture img {
    width: 400px;
    height: 150px;
}
.circle {
    position: absolute;
    width: 100px;
    height: 7px;
    right: 8px;
    bottom: 7px;
    list-style-type: none;
}
.circle li {
    float: right;
    width: 8px;
    height: 7px;
    margin: 0 3px;
    background-color: aliceblue;
    border-radius: 30%;
    transition: all .1s;
    cursor: pointer;
}
.circle .current {
    width: 12px;
    background-color: rgb(16, 136, 242);
}

③ 网页轮播图.js

window.addEventListener('load', function() {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = focus.offsetWidth;
    var index = 0;
    //1.轮播图自动播放
    var timer = this.setInterval(function() {
        index++;
        var target = -index * w;
        //使用CSS里的transform和transition属性实现图片滚动和过渡
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX('+ target +'px)';
    }, 2000);
    //2.无缝滚动,且去掉过渡效果
    ul.addEventListener('transitionend', function() {
        if (index >= ul.children.length - 2) {
            index = 0;
            ul.style.transition = 'none';
            var target = -index * w; 
            ul.style.transform = 'translateX('+ target +'px)';
        } else if(index < 0) {
            index = ul.children.length - 3;
            ul.style.transition = 'none';
            var target = -index * w; 
            ul.style.transform = 'translateX('+ target +'px)';
        }
        //3.小圆点跟随图片变化
        ol.querySelector('.current').classList.remove('current');
        var num = ol.children.length - index - 1;
        ol.children[num].classList.add('current');
    })
    //4.手指滑动轮播图
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        //手指触摸的时候就停止定时器
        clearInterval(timer);
    })
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;
        var target = -index * w + moveX; 
        //手指拖动的时候不需要动画效果,所以取消过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX('+ target +'px)';
        flag = true;
        e.preventDefault();
    })
    ul.addEventListener('touchend', function() {
        //5.回弹效果,滑动距离大于70px才会切换下一张
        if (flag) {
            if (Math.abs(moveX) > 70) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var target = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX('+ target +'px)';
            } else {
                var target = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX('+ target +'px)';
            }
            }
        //6.手指离开,恢复定时器  
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var target = -index * w;
            //使用CSS里的transform和transition属性实现图片滚动和过渡
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX('+ target +'px)';
        }, 2000);
    })
})

3.运行结果

移动端网页轮播图
F12键切换到移动端哦!文章来源地址https://www.toymoban.com/news/detail-402519.html

到了这里,关于移动端网页轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Javascript移动端触屏滑动事件详解

    移动端的触屏滑动事件其实就是touch事件,主要分为以下四种: touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发后,会生成一个event对象,e

    2024年04月11日
    浏览(38)
  • 教你用JavaScript制作轮播图

    欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图。图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时,再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会

    2024年02月11日
    浏览(56)
  • 【案例分享 | 旅游出行app】Axure制作banner轮播图交互效果

    哈喽,大家好!今天给大家介绍如何使用Axure软件制作banner轮播图的交互效果。 【预览地址含下载】电脑打开链接:https://wh9x1s.axshare.com/ 【完整案例作品预览含下载】:https://fx2z9z.axshare.com 【视频教程】:哔哩哔哩视频 首先,让我们来看下效果展示:进入页面后自动轮播图

    2024年02月19日
    浏览(56)
  • 制作轮播图经验分享——element ui走马灯的使用(附源码,效果截图)

    先附上效果图:   element ui链接地址:Carousel 走马灯 | Element Plus (gitee.io) 源码: 这里我使用的是静态图片(本地) 经验分享: 在制作轮播图的时候经常会发现图片大小不一,这时候可以在img标签里加上width:100%;height:100%即可实现图片铺满。 当然,这只是轮播图的一种,还

    2024年02月11日
    浏览(43)
  • 教程6 Vue3+Element Plus el-carousel制作轮播图(后面有修改样式的方法)

    (1)引入Element开发环境 (2)自动引入Element (3)在配置文件中进行配置,本人使用的是Vit构建工具 如果使用Vite作为构建工具,配置文件为vite.config.js,配置方法如下: (4)Element Plus全局引入 main.ts中增加下面的代码: (1)运行效果 (2)Rotation.vue参考代码 (3)卡片式轮

    2024年02月06日
    浏览(48)
  • 轮播图,用vue来写一个简单的轮播图

    写的很简单,就是一个小练习,哈哈哈,下面的几张图分别是轮播图的第一张,中间图,最后一张的效果图。 使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。 思路: 1.vue实例中声明一个data属性imgArr,用于存放每张轮播图的地址, 2.同时定义一个默认起始索引in

    2024年02月16日
    浏览(42)
  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(94)
  • 前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取

    目录 1-轮播图模块数据开发 2-floor组件开发 3-抽取全局轮播图组件 轮播图需要用到swiper插件,先安装5.4.5版本的swiper: npm  install --save swiper@^5.4.5 --force 模拟从服务器获取数据; 1-编写mockRequests的js文件和之前编写的request的js文件类似,就修改一下baseURL,我们模拟的数据请求路

    2023年04月08日
    浏览(49)
  • 解决微信小程序swiper轮播图撑不满有留白 实现swiper轮播图撑满父容器

    问题 :如下图,swiper轮播图两侧会有留白,没有撑满swiper 失败的尝试 : 1.调整图片尺寸 2.设属性设置image的mode为scaleToFill 3.设置item的属性 都没能实现将图片填充满轮播图,图片会有右侧和底部两块留白 通过调试器查看到image区域很小,怀疑是image本身属性的问题 随后尝试在

    2024年04月25日
    浏览(59)
  • 使用 swiper 做轮播图

    大好好,我是 17。 虽然我是一个喜欢造轮子的人,但是对于 swiper,我还是直接拿过来用了,功能很多,也很方便。本文介绍一些常用的功能。 版本 Swiper 8.3.0 我把所有常用配置的都写上了,不需要哪个直接删除就好。 最外层的 swiper 的样式 并没有设置高宽,需要使用者来设

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包