移动端滚动神器 better-scroll 系列篇二 原生js+BS制作幻灯片

简介: 笔记

话不多说,上代码

初始html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
         body{
            margin: 0;
        }
        body,html{
            height: 100%;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .con{
            width: 100vw;
            /* height: 100vh; */
            overflow: hidden;
            position: relative;
        } 
        .list{
            width: 400vw;
            overflow: hidden;
            position: relative;
        }
        .list li{
            width: 100vw;
            height: 200px;
            float: left;
            text-align: center;
            box-sizing: border-box;
            font:24px/200px "微软雅黑";
            background: chocolate;
            color: white;
            /* border:1px solid green; */
        }
        .nav{
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100vw;
            text-align: center;
        }
        .nav a{
            display: inline-block;
            width: 12px;
            height: 12px;
            line-height: 12px;
            background: white;
        }
        .nav a.active{
            background: orange;
        }
    </style>
    <script type="text/javascript" src="https://unpkg.com/better-scroll@1.12.1/dist/bscroll.min.js"></script>
</head>
<body>
    <div class="con">
        <ul class="list">
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
        </ul>
        <nav class="nav">
            <a class="active"></a>
            <a></a>
            <a></a>
            <a></a>
        </nav>
    </div>
    <script>    
</body>
</html>

初始化容器

<script>
 window.onload = () =>{
            var con = document.querySelector(".con");
            var list = document.querySelector(".list");
            var navs = document.querySelectorAll(".nav a");
            var bscroll =  new BScroll(con,{
              //横向滚动 关闭Y轴滚动
                scrollX:true,
                scrollY:false,
                //一般为一次滚动一张,所以这里关闭缓冲动画
                momentum:false,
                //此项为高级配置项 可以设置无缝滚动
                snap: {
                    //无缝滚动配置项 多了第一张和最后一张 设置ul的宽度
                    // loop:true,
                    //滑动的距离为屏幕大小的百分比占比
                    threshold:0.2
                }
            });
    </script>

这个时候我们可以看到,已经能正常滚动了,一次只滚动一张。接下来把nav加上去,滚动到第几张给个点标识一下。

scrollEnd事件为当前滚动操作执行完之后触发

bscroll.on("scrollEnd",()=>{
        //刷新dom
                bscroll.refresh();
                //当前视口页的下标
                console.log(bscroll.getCurrentPage().pageX);
                //对象 页数 滑动距离
                navs.forEach((nav)=>{
                   if (nav) nav.classList.remove("active");
                })
                navs[bscroll.getCurrentPage().pageX].classList.add("active");
            })

FAQ

用模拟数据没有请求服务端的时候,当dom发生变化的时候,BS有时候没有感知,需要调用**refresh()**手动刷新。

目录
打赏
0
0
0
0
8
分享
相关文章
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
180 6
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
121 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
79 1
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
75 0
原生JavaScript+canvas实现五子棋游戏_值得一看
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
56 0
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
54 0
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
96 0
|
7月前
|
【vue】 vue2 | js 实现数字滚动效果
【vue】 vue2 | js 实现数字滚动效果
145 0
|
7月前
|
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
39 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57