移动端轮播图

1）概况

//和PC端基本一样

//1 可以自动播放图片

//2 手指可以拖动播放

一图片自动播放

1）自动播放

//1 开启定时器
//2 用translate移动
//3 让图片优雅的移动 添加transition过渡

2）无缝滚动

3）让小圆点跟着一起变化

二 classList属性

1）概念

是H5新增的一个属性

用于 添加 删除 切换CSS类

返回值

返回一个数组
DOMTokenList(3) ["one", "two", "three", value: "one two three"]
    0: "one"
    1: "two"
    2: "three"
    length: 3
    value: "one two three"
    __proto__: DOMTokenList

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>classList</title>
    <style>
        .red { background: black; }
    </style>
</head>
<body>
<div class="one two three"></div>
<button>开关灯</button>
<script>
    var div = document.querySelector('div');
    var btn = document.querySelector('button');
    //1 获取类名
    console.log(div.classList);//返回一个数组
    console.log(div.classList[0]);//取得第一个元素

    //2 添加类名 是追加的形式 不会覆盖前面的
    div.classList.add('five');
    
    //3 删除类名
    div.classList.remove('five');

    //4 toggle 切换类名 [如果有 我删除 如果没有 我添加]
    btn.onclick = function(){
        document.body.classList.toggle('red');
    }
</script>
</body>
</html>

2）页面布局

对应的页面结构