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

你的名字 2022-01-06 11:33 129阅读 0赞

<!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>