移动WEB轮播图

HTML
首先定义一个盒子作为轮播图容器，加入轮播图的图片元素和导航图片元素。
一共有4张图片轮播，需要添加两张图片作为过渡，分别是第一张和最后一张要轮播的图片，使他连贯不冲突。

<div class="rotation">
<ul class="imgs">
                <li>
                    <img src="images/graduation1.png" alt="" >
                    <p>我校举行庆祝2019/7/2</p>
                </li>
                <li>
                    <img src=" images/rotation1.png" alt="">
                    <p>我校举行庆祝建党98周年升国旗仪式 2019/7/2</p>
                </li>
                <li>
                    <img src="images/rotation1.png" alt="" >
                    <p>学生合照 2019/7/2</p>
                </li>
                <li>
                    <img src="images/rotation1.png" alt="" >
                    <p>建党98周年升国旗仪式 2019/7/2</p>
                </li>
                <li>
                    <img src="images/graduation1.png" alt="" >
                    <p>我校举行庆祝2019/7/2</p>
                </li>
                <li>
                    <img src="images/rotation1.png" alt="" >
                    <p>我校举行庆祝建党98周年升国旗仪式 2019/7/2</p>
                </li>

            </ul>
            <ol class="circle">
                <li class="red_current"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>

CSS
对轮播图添加样式

nav .rotation {
    /* ！！轮播图下面的div抖动问题： 在图片的上一层div样式上加一个transform:translataZ(0)*/
    transform: translateZ(0);
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 270px;
    /* background-color: pink; */
}
nav .rotation .imgs {
//一共有六张图片
    width: 600%;
    margin-left: -100%;
    overflow: hidden;
    //高度要比图片大小高，因为还有文字描述需要加进来
    height: 250px;
}

nav .rotation .imgs li {
//将图片浮动使它们在一行排列
    float: left;
    width: 414px;
    height: 212px;
    margin: 0 auto;

}
//设置图片大小
.rotation .imgs li img {
    margin-bottom: 16px;
    height: 212px;
    width: 100%;
}

//设置图片大小和位置
.rotation li p {
    display: block;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
}
//定位小圆点位置
.rotation .circle {
    position: absolute;
    bottom: 25px;
    right: 0px;
}
//设置小圆点样式，大小
.rotation .circle li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 4px;
    border-radius: 5px;
    background-color: #d0d0d0;
}
//设置第几张图片轮播时相应圆点变化的样式：颜色边框大小之类的，这里就变化了颜色
.rotation .circle .red_current {
    background-color: red;
}

Javascript

window.addEventListener('load', function () {

    //阻止手长期触碰屏幕触发右键
    window.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    })
    // 获取轮播图模块
    var rotation = document.querySelector('.rotation');
    // 获取图片模块
    var imgs = rotation.querySelector('.imgs');
    // 获取小圆点模块
    var circle = rotation.querySelector('.circle');
    //获取轮播图模块的宽度
    var wth = rotation.offsetWidth;
    // console.log(circle);
    // 设置图片的下标
    var index = 0;
    // 定时器:每两秒播放下一张图片
    var timer = setInterval(function () {
        index++;
        // 下一张图片的位置
        var translatex = -(index * wth);
        // console.log(translatex);
        // 过渡效果
        imgs.style.transition = 'all 0.5s';
        // 移动的终点位置，这里的终点位置不是相对与上一张图的位置，一直都是相对于起点位置(0,0);
        imgs.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000)
    // 当过渡效果结束后，触发事件
    imgs.addEventListener('transitionend', function () {
        // 如果移动到第5张图结束，则回到第一张
        if (index >= 4) {
            index = 0;
            // 回到第一张不需要触发过渡效果，因为第五张图与第一张图是一样的
            imgs.style.transition = 'none';
            var translatex = -(index * wth);
            //  因为这里的下标是4的图，即第五张与第一张一样的图，要回到第一张图，，否则只是下标回去，而图为第五张图，之后小圆点会把1忽略
            imgs.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            // 如果为负数则说明滑动到-1，则需要回到看到的最后一张图，即第四张图，下标为3
            index = 3;
            // 取消过渡效果
            imgs.style.transition = 'none';
            var translatex = -(index * wth);
            // 图片回到第四张图,下标为3的图
            imgs.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 运用classList将带有这个红点样式的类移除，再添加这个红点样式类给另一个元素
        // 当过渡效果触发时，即图片已经替换，获取小圆点
        var red_current = circle.querySelector('.red_current');
        // console.log(red_current);
        // 将小圆点这个类移除，即类似排他法，将所有元素的小红圆点清掉，再将新的对应下标的小圆点赋予红色
        red_current.classList.remove('red_current');
        circle.children[index].classList.add('red_current');
    })

    // 手触碰时的位置
    var startX = 0;
    // 手触碰后移动的距离
    var moveX = 0;
    // 判断触摸后是否移动距离
    var flag = false;
    // 手触到图片触发事件
    imgs.addEventListener('touchstart', function (e) {
        // 获取手触碰时的位置
        startX = e.targetTouches[0].pageX;
        // console.log(startX);
        // 当手触碰轮播图终止定时器，结束移动
        clearInterval(timer);
        // console.log(1111);
    })
    // 当手移动时触发事件
    imgs.addEventListener('touchmove', function (e) {
        // console.log(2222);
        // 移动的距离 = 手指新位置 - 手指刚触碰时的位置
        moveX = e.targetTouches[0].pageX - startX;
        // console.log(moveX);
        // 图片移动距离=目前位置+手指移动距离
        var translatex = moveX - index * wth;
        // 移除过渡效果
        imgs.style.transition = 'none';
        // 图片移动距离
        imgs.style.transform = 'translateX(' + translatex + 'px)';
        // 记录手指移动过
        flag = true;
    })
    // 手指松开触发事件
    imgs.addEventListener('touchend', function (e) {
        // 如果移动时间触发过则执行
        if (flag == true) {
            // 移动距离大于50px则执行效果
            if (Math.abs(moveX) > 50) {
                // 大于0则说明手指右移，图片左移，下标减一。反之，小于0手指左移，图片右移，下标加一
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                // 移动到下一个图片的距离
                var translatex = -(index * wth);
                // 触发过渡效果
                imgs.style.transition = 'all 0.3s';
                imgs.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // 移动距离小于50px则执行效果，回到当前下标位置;
                var translatex = -(index * wth);
                imgs.style.transition = 'all 0.1s';
                imgs.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        //保证只有一个定时器开着
        clearInterval(timer);
        // 开启定时器
        timer = setInterval(function () {
            index++;
            var translatex = -(index * wth);
            // console.log(translatex);
            imgs.style.transition = 'all 0.5s';
            imgs.style.transform = 'translateX(' + translatex + 'px)';

        }, 2000)
    })
})