轮播图完整代码

<!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>移动轮播图</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }

        .banner {
            position: relative;
            /*padding-top: 44px;*/
            overflow: hidden;
        }

        .banner img {
            width: 100%;
        }
        .banner ul {
            overflow: hidden;/*清楚浮动*/
            width: 500%;
            margin-left: -100%;/*让第一张漏出来 不添加的话是最后一张*/
        }
        .banner ul li {
            float: left;
            width: 20%; /*500%的20% 就是100%*/
        }
        .banner ol {
            position: absolute;
            bottom: 5px;
            right: 5px;
            margin: 0;/*清除ol的默认值*/
        }
        .banner ol li {
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: #fff;
            list-style: none;
            border-radius: 2px;
            transition: all .3s;
        }

        .banner ol li.current {
            width: 15px;
        }
    </style>
</head>
<body>

<div class="banner">
    <ul>
        <li><img src="image/b3.jpg" alt=""></li>
        <li><img src="image/b1.jpg" alt=""></li>
        <li><img src="image/b2.jpg" alt=""></li>
        <li><img src="image/b3.jpg" alt=""></li>
        <li><img src="image/b1.jpg" alt=""></li>
    </ul>
    <!-- 小圆点 -->
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>

<script>
    var banner = document.querySelector('.banner');
    var ul = banner.children[0];//做运动的主体
    var ol = banner.querySelector('ol');
    var bannerW = banner.offsetWidth;
    console.log(bannerW);

    var index = 0;

    // 图片自动播放
    //1.1 开启定时器
    var timer = setInterval(function () {
        index++;
        var translatex = -index * bannerW ;
        //给ul添加过渡效果 让图片优雅的移动
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX('+ translatex + 'px)';
    },2000);

    //1.2 图片无缝滚动  不能直接判断 因为有过渡效果 有延时
    //等过渡完成后 再去判断  监听过渡完成的事件 transitionend
    ul.addEventListener('transitionend',function () {
        //判断是否到了最后一张
        if (index == 3) {
            index = 0;
            ul.style.transition = 'none';//去掉过渡效果 让ul快速跳到目标位置
            var translatex = -index * bannerW ;//利用最新的索引号 * 宽度 继续去滚动图片
            ul.style.transform = 'translateX('+ translatex + 'px)';
        }
        //判断是否到了第一张
        if (index < 0) {
            index = 2;
            ul.style.transition = 'none';//去掉过渡效果 让ul快速跳到目标位置
            var translatex = -index * bannerW ;//利用最新的索引号 * 宽度 继续去滚动图片
            ul.style.transform = 'translateX('+ translatex + 'px)';
        }

        // 3. 小圆点跟随变化
        // 把ol里面li带有current类名的选出来去掉类名 remove
        ol.querySelector('.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current   add
        ol.children[index].classList.add('current');
    });

    //2 手指滑动轮播图
    //2.1 触摸元素 获得手指做标的值
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });

    //2.2 移动手指 计算手指的滑动距离 并且移动盒子
    ul.addEventListener('touchmove',function (e) {
        //移动的距离 = 滑动的距离 - 初始的距离
        moveX = e.targetTouches[0].pageX - startX;
        console.log(moveX);

        //移动盒子  盒子原来的位置 + 手指移动的距离
        var translatex = -index * bannerW + moveX;
        //手指拖动的时候 不需要动画效果 所以取消过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX('+ translatex + 'px)';
        flag = true; // 如果用户手指滑动过 就设置为true 如果没有滑动 flag就一直是false
        e.preventDefault(); // 阻止滚动屏幕的行为
    });


    //4 手指离开屏幕  根据滑动距离分不同的情况
    //如果移动距离小于某个像素 就回弹回去
    //如果移动距离大于某个像素 就上一张 下一张 滑动
    ul.addEventListener('touchend',function(){

        if (flag) { //如果是true才做判断计算尺寸 如果是法拉色就不执行
            //4.1 大于50的操作 播放图片
            if (Math.abs(moveX) > 50) { //moveX 有可能是负值 所以取绝对值
                //如果是右滑 播放上一张 moveX是正值
                //如果是左滑 播放下一张 moveX是负值
                if (moveX > 0) {//大于0 就是正值
                    index--;
                } else {//小于0 就是负值
                    index++;
                }
                var translatex = -index * bannerW;
                ul.style.transition = 'all 0.3s';
                ul.style.transform = 'translateX('+ translatex + 'px)';
            } else {//4.2 小于50的操作 回弹
                var translatex = -index * bannerW;
                ul.style.transition = 'all 0.3s';
                ul.style.transform = 'translateX('+ translatex + 'px)';
            }
        }

        //5 手指离开屏幕 定时器重新开始
        clearInterval(timer); //开启前先把前面的定时器清除 保证页面只有一个定时器
        timer = setInterval(function(){
            index++;
            var translatex = -index * bannerW ;
            //给ul添加过渡效果 让图片优雅的移动
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX('+ translatex + 'px)';
        },2000)
    });
</script>
</body>
</html>
posted @ 2021-03-03 21:30 棉花糖88 阅读(2004) 评论(0) 收藏举报
刷新页面返回顶部
棉花糖88

轮播图完整代码

公告
