案例：移动端轮播图 / classList

最新推荐文章于 2022-12-31 18:37:43 发布

原创最新推荐文章于 2022-12-31 18:37:43 发布 · 215 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

移动端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在移动端实现轮播图的自动播放、拖动、定时器功能，以及过渡效果、无缝滚动和小圆点跟随。重点讲解了利用translate移动、添加过渡完成事件和处理索引变化的技巧，同时涵盖了类名操作和HTML5 classList API的使用。

移动端常见特效
案例：移动端轮播图
功能基本和pc端一致

可以自动播放图片
手指可以拖动播放轮播图
自动播放功能
开启定时器
移动端移动，可以使用translate 移动
可以添加过渡效果
无缝滚动
判断条件是：等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加过渡完成事件 transitionend
判断条件：如果索引号为 3 （图片是3张，但实际添加的是5张详情见代码），说明走到最后一张，此时索引号要复原为0
此时图片去除过渡效果，然后移动
如果索引号小于0 ，说明是倒着走，索引号等于2
小圆点跟随变化效果
把ol里面li带有current 类名的选出来去除类名
让当前索引号的li加上 current
但是，是等着过渡结束后变化，所以这个写到transitionend 事件里面
ps: classList 是HTML5新增的一个属性，返回元素的类名，但ie10以上版本才支持，在移动端可以随意使用
此方法用于在元素中添加，移除及切换CSS类
（1）添加类 element.classList.add(‘类名’)
是在后面追加类名不会覆盖原来的类与className(覆盖以前的类名)不同
（2）移除类 element.classList.remove(‘类名’)
（3）切换类element.classList.toggle(‘类名’) 自动判断元素是否有这个类，如果有，就去除，如果没有，就加上

<style>
      .bg {
        background: #000;
      }
    </style>
  </head>
  <body>
    <div class="one two"></div>
    <button>开关灯</button>
  </body>
  <script>
    var div = document.querySelector("div");
    console.log(div.classList); //返回的是一个伪数组
    console.log(div.classList[0]); //打印第一个类名 one
    //1.添加类 element.classList.add('类名')
    //是在后面追加类名 不会覆盖原来的类  与className(覆盖以前的类名)不同
    div.classList.add("three");
    console.log(div.classList[2]); //打印three
    //2.移除类 element.classList.remove('类名')
    div.classList.remove("three");
    //3.切换类element.classList.toggle('类名')
    var btn = document.querySelector("button");
    btn.addEventListener("click", function () {
      document.body.classList.toggle("bg"); //自动判断元素是否有这个类，如果有，就去除，如果没有，就加上
    });
  </script>