h5+css3+js之移动端轮播图

概要

1. 功能概要
   1. 自动播放轮播图
   2. 用户手动滑动轮播图
2. 涉及知识点
   1. 采用css3中transition实现动画移动过渡效果以及transform实现动画效果
   2. 采用h5中classList切换类的方式实现底部小圆圈同步变化效果
   3. 移动端touch触屏事件
3. 效果预览
   

实现代码

html

<!-- 轮播图-->
<div class="focus">
    <ul>
        <li><img src="../imgs/OIP.jpg" alt="轮播图片"></li>
        <li><img src="../imgs/green_bg.jpg" alt="轮播图片"></li>
        <li><img src="../imgs/grils.png" alt="轮播图片"></li>
        <li><img src="../imgs/OIP.jpg" alt="轮播图片"></li>
        <li><img src="../imgs/green_bg.jpg" alt="轮播图片"></li>
    </ul>
    <!-- 小圆点 -->
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>

css

.focus {
    position: relative;
    padding-top: 44px;
    overflow: hidden;
}

.focus img {
    width: 100%;
    height: 500px;
}

.focus ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
    padding: 0;
}

.focus ul li {
    float: left;
    width: 20%;
}

.focus ol {
    position: absolute;
    bottom: 30px;
    right: 35px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    list-style: none;
    border-radius: 2px;
    transition: all .3s;
}

.focus ol li.current {
    width: 35px;
}

js

window.addEventListener('pageshow',function () {
    // 1. 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 2. 获得focus宽度
    var w = focus.offsetWidth;
    // 3. 定时器自动播放轮播图
    var index = 0;
    var timer = setInterval(funcTimer,2000)

    // 监听过渡完成事件 只有过渡完成才能移动盒子
    ul.addEventListener('transitionend',function () {
    // 无缝滚动
        if (index >= 3) {
            index = 0;
        } else if(index < 0) {
            // 倒着拖拉
            index = 2;
        }
        var translateX = -index * w;
        // 去掉过渡时间 以便盒子快速跳到第一张
        this.style.transition = 'none';
        // 移动
        this.style.transform = 'translateX('+translateX+'px)';

    //  小圆圈跟着变化
    //  去掉带有current类名的li标签
        ol.querySelector('.current').classList.toggle('current');
    //  当前li加上current
        ol.querySelectorAll('li')[index].classList.add('current');
    })

    // 手指滑动轮播图
    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) {
        // 停止计时器
        clearInterval(timer);
        // 计算手指移动的距离
        moveX = e.targetTouches[0].pageX - startX;
        // 清除过渡
        this.style.transition = 'none';
        // 计算盒子移动距离
        var translateX = -index * w + moveX;
        // 移动盒子
        this.style.transform = 'translateX('+translateX+'px)';
        // 用户滑动了屏幕
        flag = true;
        // 阻止滚动屏幕的默认行为
        e.preventDefault();
    })


    // 手指离开轮播图 根据移动距离判断播放上一张/下一张/回弹
    ul.addEventListener('touchend',function () {
        // 如果flag = true 表明用户滑动了轮播图  才去判断移动距离 避免不必要的计算
        if (flag) {
            if (Math.abs(moveX) > 100) {
                index = moveX > 0? index - 1: index +1;
            }
            // 如果不大于100像素 则不做任何操作 使其回弹
            this.style.transition = 'all .3s';
            // 计算盒子移动距离
            var translateX = -index * w;
            // 移动盒子
            this.style.transform = 'translateX('+translateX+'px)';
        }
        // 开启定时器
        clearInterval(timer); // 关闭多余的定时器
        timer = setInterval(funcTimer,2000);
        // 重置
        flag = false;
    })

    // 定时器执行函数
function funcTimer() {
    index++;
    var translateX = -index * w;
    // 添加过渡效果
    ul.style.transition = 'all .3s';
    // 在x上移动
    ul.style.transform = 'translateX(' + translateX + 'px)';
}
})

标签：css3,index,style,translateX,轮播,focus,js,ul,var
来源： https://blog.csdn.net/chen__cheng/article/details/113767282