【Javascript】【UI】实现移动端轮播图

在这里插入图片描述
html代码


<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    </head>

    <link rel="stylesheet" type="text/css" href="Z.css">
    <script type="text/javascript" src="jquery-3.4.0.js"></script>
    <script type="text/javascript" src="Z.js"></script>

    <body>

        <div id="carousel_root">
            <div id="carousel_image_pane">
                <img src="../image/t01.jpg"/>
                <img src="../image/t02.jpg"/>
                <img src="../image/t03.jpg"/>
                <img src="../image/t04.jpg"/>
                <img src="../image/t05.jpg"/>
            </div>

            <div id="carousel_point_pane">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </body>

</html>

css代码


* {
    padding: 0px;
    margin: 0px;
}

#carousel_root {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#carousel_image_pane {
    width: 500%;
    font-size: 0px;
    overflow: hidden;
}

#carousel_image_pane > img {
    width: 20%;
}

#carousel_point_pane {
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -10px);
    font-size: 0px;
}

#carousel_point_pane > span {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: white;
    display: inline-block;
    margin-left: 10px;
}

#carousel_point_pane > span.selected {
    background: orange;
}

js代码


$(() => {
    //查询元素
    let $carouselRoot = $("#carousel_root");
    let $carouselPane = $("#carousel_image_pane");
    let $carouselImgs = $("#carousel_image_pane>img");
    let $carouselDots = $("#carousel_point_pane>span");
    let imgWidth = $carouselImgs[0].width;

    //选中首个圆点
    $carouselDots[0].classList.add("selected");

    //记录滑动滑动位置和触摸位置
    let translateX = 0;
    let startTouchX;
    let currentTouchX;

    //触摸事件
    $carouselPane[0].addEventListener("touchstart", event => {
        startTouchX = event.touches[0].clientX;
        currentTouchX = startTouchX;
    });
    $carouselPane[0].addEventListener("touchmove", event => {
        translateX = translateX + (event.touches[0].clientX - currentTouchX) * 1.5;
        if (translateX > 0)
            translateX = 0;
        if (translateX < -4 * imgWidth)
            translateX = -4 * imgWidth;
        $carouselPane.css("transform", "translateX(" + translateX + "px)");
        currentTouchX = event.touches[0].clientX;
    });
    $carouselPane[0].addEventListener("touchend", event => {
        let index = -translateX / imgWidth;
        //滑动距离满三分之一自动滑动到下一张，不满自动取消
        if (currentTouchX < startTouchX)
            index = Math.floor(index + 0.5);
        if (currentTouchX > startTouchX)
            index = Math.ceil(index - 0.5);
        translateX = -index * imgWidth;
        $carouselPane.css("transform", "translateX(" + translateX + "px)");

        //选中对应圆点
        $carouselDots.removeClass("selected");
        $carouselDots[index].classList.add("selected");
    });

    //圆点点击事件
    $carouselDots.click(function () {
        let index = $(this).index();
        $carouselDots.removeClass("selected");
        $carouselDots[index].classList.add("selected");
        translateX = -index * imgWidth;
        $carouselPane.css("transform", "translateX(" + translateX + "px)");
    });
});

下一篇文章，我们对轮播图进行封装
将其封装成库，几行代码即可在任意页面中实现轮播图

【Javascript】【UI】实现移动端轮播图

猜你喜欢