移动端轮播图

Posted 2020-09-28
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <style>
        *{margin:0;padding:0;}
        html,body{height: 100%;}
        .box{
            height: 100%;
            background: #76c6c8;
        }
        .img{
            position: absolute;
            top: 0;
            right:0;
            bottom:0;
            left: 0;
            margin: auto;
            height: auto;
            transition: all 1s ease;
        }
        .page{
            position: absolute;
            width: 20%;
            bottom: 35%;
            height: auto;
            left: 50%;
            margin: auto;

            /*background: #abef98;*/
        }
        .page>ul{
            margin-left: -50%;
            background: #ffffff;
            overflow: hidden;
            opacity: 0.5;
            text-align: center;
        }
        .page > ul > li{
            margin: auto;
            float: left;
            list-style: none;
            width: 33.33%;
            border: solid 1px #000000;
            box-sizing: border-box;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="guide"></span>
        <img class="img" src="img/img1.jpg" width="100%" alt=""/>
        <div class="page">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var box = document.getElementsByClassName(‘box‘)[0];
    var img = document.getElementsByClassName(‘img‘)[0];
    var guide = document.getElementsByClassName(‘guide‘)[0];
    var page = document.getElementsByClassName(‘page‘)[0];
    
    document.body.addEventListener(‘touchstart‘,function(e){
        event.preventDefault();
        return false;
    });
    document.body.addEventListener(‘touchend‘,function(e){
        event.preventDefault();
        return false;
    });

    var startX,startY,endX,endY;
    box.addEventListener(‘touchstart‘,function(e){
        e.preventDefault();
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;

    });

    box.children[2].children[0].children[0].style.background = ‘#f00‘;
    box.addEventListener(‘touchend‘,function(e) {
        e.preventDefault();
        var x, y;
        endX = e.changedTouches[0].clientX;
        endY = e.changedTouches[0].clientY;
        x = endX - startX;
        y = endY - startY;

        var num = box.children[1].src.split(‘img/img‘)[1][0];
        function pageN(x){
            var pageNum = x.children[0].innerText;
            for(i in pageNum){
                if(num == pageNum[i]){
                    box.children[2].children[0].children[i].style.background = ‘#f00‘;
                }else{
                    box.children[2].children[0].children[i].style.background = ‘#fff‘;
                }
            }
        }
        if(x>y && x>-y){
            num--;
            if(num < 1){
                num = 3;
                img.src = ‘img/img‘ +num+ ‘.jpg‘;
            }else{
                img.src = ‘img/img‘ +num+ ‘.jpg‘;
            }
            pageN(page);
            guide.innerText = ‘向右‘;
        }else if(x<y && x<-y){
            num++;
            if(num > 3){
                num = 1;
                img.src = ‘img/img‘ +num+ ‘.jpg‘;
            }else if(num < 1){
                num = 3;
                img.src = ‘img/img‘ + num + ‘.jpg‘;
            } else{
                img.src = ‘img/img‘ + num + ‘.jpg‘;
            }
            pageN(page);
            guide.innerText = ‘向左‘;
        }else if(x>y && x<-y){
            guide.innerText = ‘向上‘;
        }else if(x<y && x>-y){
            guide.innerText = ‘向下‘;
        }
    });
</script>
</html>
以上是关于移动端轮播图的主要内容，如果未能解决你的问题，请参考以下文章
为啥vue移动端轮播图的组件安装后没法使用？
移动端轮播图
移动端轮播图实现