【移动端】使用js和css3的translate、transition实现的简单轮播图

最新推荐文章于 2024-06-28 09:30:57 发布

乌鲁托拉曼

最新推荐文章于 2024-06-28 09:30:57 发布

阅读量2.3k

点赞数 1

分类专栏： HTML+CSS JavaScript学习之路

本文链接：https://blog.csdn.net/lizhengxv/article/details/93526091

版权

JavaScript学习之路同时被 2 个专栏收录

43 篇文章 2 订阅

订阅专栏

HTML+CSS

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        ul ,li{
            list-style:none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .clearFix::after,
        .clearFix::before{
            content: '';
            font-size: 0;
            height: 0;
            line-height: 0%;
            display: block
        }
        .clearFix::after{
            clear: both;
        }
        div{
            position: relative;
            overflow: hidden;
        }
         /* 图片部分 */
        .banner{
           
            width: 1000%;
            transform: translateX(-10%);
           -webkit-transform: translateX(-10%);
        }
        .banner li{
            float: left;
            width: 10%;
        }
        .banner li img{
            width: 100%;
            display: block;
        }

        /* 点部分 */
        .spot{
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%)
        }
        .spot li{
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin-right: 3px;
        }
        li.now{
            background-color:orange;
        }
        
        
    </style>

</head>
<body>
    <div>
        <ul class="banner clearFix">
                    <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>      
        </ul>
        <ul class="spot">
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>
   
</body>
<script>
window.onload = function(){
    // 轮播区域
    var banner = document.querySelector('div');
    // 屏幕宽度
    var width = banner.offsetWidth;
    // 图片容器
    var imgBox = banner.querySelector('.banner');
    // 所有的点
    var points = banner.querySelector('.spot').querySelectorAll('li');

    // 添加过渡属性
    var addTransition = function(){
        imgBox.style.transition = 'all 0.2s';
        imgBox.style.webkitTransition = 'all 0.2s';
    }
    var removeTransition = function(){
        imgBox.style.transition = 'none';
        imgBox.style.webkitTransition = 'none';
    }
    var setTranslateX = function(x){
        imgBox.style.transform = 'translateX(' + x + 'px)';
        imgBox.style.webkitTransform = 'translateX(' + x + 'px)';
    }
    // 每张图片的索引，默认第一章
    var index = 1;
    
    var timer = setInterval(() => {
        index++;
        addTransition();
        setTranslateX( -index*width );
    }, 1000);

    imgBox.addEventListener('transitionend', function(){
        if(index >= 9){
            index =1;
            removeTransition();
            setTranslateX(-index*width)
        }
       else if(index <= 0){
            index =8;
            removeTransition();
            setTranslateX(-index*width)
        }
        setPotins();
    });

    var setPotins = function(){
        for (var i = 0; i < points.length; i++) {
            points[i].classList.remove('now');   
        }    
        points[index-1].classList.add('now') 
    }

    // 触摸事件
    var startX = 0;
    // 触摸移动距离
    var distanceX = 0;
    var isMove = false;

    imgBox.addEventListener('touchstart', function(e){
        clearInterval(timer);
        startX = e.touches[0].clientX;
    })
    imgBox.addEventListener('touchmove', function(e){
        // 记录滑动过程中的x坐标
        var moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        var translateX = -index*width+distanceX;
        removeTransition();
        setTranslateX(translateX);
        isMove=true;
    })

    imgBox.addEventListener('touchend', function(){
        if(isMove){
            // 滑动距离小于屏幕1/3，吸附效果
            if(Math.abs(distanceX) < width / 3 ){
                addTransition();
                setTranslateX(-index*width)
            }else{
                // h滑动下一张
                // 根据滑动判断左滑还是右滑动
                //  右滑动
                if(distanceX>0){
                    index--;
                }else{
                    // 左滑动
                    index++;
                }
                addTransition();
                setTranslateX(-index*width)
            }
              // 重置参数
            startX = 0;
            distanceX = 0;
            isMove = false;
            clearInterval(timer);
            timer = setInterval(() => {
                index++;
                addTransition();
                setTranslateX(-index*width)
            }, 1000);
        }
       })
}
</script>
</html>