HTML轮播图实现拖拽切换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41820986/article/details/116035258
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        html {
            /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
            -ms-overflow-style: none;
            /*火狐下隐藏滚动条*/
            overflow: -moz-scrollbars-none;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        .swiper {
            width: 800px;
            height: 340px;
            background: pink;
            margin: 0 auto;
            margin-top: 0px;
            /* overflow-x: scroll; */
            /* overflow-y: hidden; */
            cursor: pointer;
            position: relative;
        }

        .swiper-box {
            /* display: inline-block; */
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory; //移动端自动回弹
            background: #FFF;
            font-size: 0;
            padding: 0;
            margin: 0;
        }

        .swiper-box div {
            width: 800px;
            height: 340px;
            background-color: aqua;
            border-right: 1px solid;
            white-space: nowrap;
            display: inline-block;
            scroll-snap-align: start; //移动端自动回弹
            font-size: 0;
            padding: 0;
            margin: 0;
        }

        img {
            font-size: 0;
            width: 800px;
            height: 340px;
        }

        .span {

            margin: 0 auto;
            line-height: 20px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .span span {
            background: #ccc;
            width: 10px;
            height: 10px;
            margin: 0 10px;
            border-radius: 25px;
        }
    </style>
</head>

<body>
    <div class="swiper">

        <div class="swiper-box" id='swiper-box'>
            <div>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F16%2F20170616201943_AFE2h.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621696031&t=e6df7a6541d963af02b68199eeaa2557"
                    alt="" draggable="false">
            </div>
            <div>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3710330689,4078473618&fm=26&gp=0.jpg"
                    alt="" draggable="false">
            </div>
            <div>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1294801668,2739186069&fm=26&gp=0.jpg"
                    alt="" draggable="false">
            </div>
			 <div>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1294801668,2739186069&fm=26&gp=0.jpg"
                    alt="" draggable="false">
            </div>


        </div>
        <div class="span" id="span"></div>
    </div>


    <script>
        var swiper = document.getElementById('swiper-box').getElementsByTagName('div')		
        var dian = document.getElementById('span').getElementsByTagName('span')
        var px, px2
        var span = ''
        var index = 0  //指示器初始索引

        //     swiper[i].index = i
        for (var i = 0; i < swiper.length; i++) {
            span += '<span></span>'
            swiper[i].index = i
            swiper[i].onmousedown = function (event) {
			//console.log(event)
                var event = window.event || ev;
                left = event.clientX * (this.index + 1)
                px = left
                console.log(left)
                // 获取鼠标点击位置
                document.onmousemove = function (event) {//鼠标移动
                    var event = window.event || ev;
                    lefta = event.clientX - left //鼠标移动的距离
                    px2 = lefta
                    console.log(lefta)
                    //随着鼠标拖动滑动
                    for (var i = 0; i < swiper.length; i++) {
                        swiper[i].setAttribute('style', 'transform:translate3d(' + lefta + 'px, 0px, 0px); transition-duration: 300ms')
                    }
                    document.onmouseup = function (event) {//鼠标抬起
                        var event = window.event || ev;
                        document.onmousemove = null;
                        document.onmouseup = null;
                        // 判断弹回还是下一张
                        if (px2 > -410) {
                            console.log(1111)
                            index = 0
                            for (var i = 0; i < swiper.length; i++) {

                                swiper[i].setAttribute('style', 'transform:translate3d(0px, 0px, 0px); transition-duration: 300ms')
                            }
                        } else if (px2 < -410 && px2 > -1201) {

                            for (var i = 0; i < swiper.length; i++) {
                                swiper[i].setAttribute('style', 'transform:translate3d(-800px, 0px, 0px); transition-duration: 300ms')
                            }
                            index = 1
                        } else {
                            for (var i = 0; i < swiper.length; i++) {
                                swiper[i].setAttribute('style', 'transform:translate3d(-1600px, 0px, 0px); transition-duration: 300ms')
                            }
                            index = 2
                        }
                        // 指示器
                        for (var i = 0; i < dian.length; i++) {


                            dian[i].style.background = '#ccc'
                        }
                        dian[index].style.background = '#fff'
                    }
                }
            }
        }
        // 指示器
        document.getElementById('span').innerHTML = span
        document.getElementById('span').getElementsByTagName('span')[index].style.background = '#fff'
        // h5指示器显示
        document.getElementById('swiper-box').addEventListener('scroll', function () {
            console.log(this.scrollLeft)
            //获取距离左边距离
            let idnex = Math.round(this.scrollLeft / 800)
            for (var i = 0; i < dian.length; i++) {

                dian[i].style.background = '#ccc'
            }
            dian[idnex].style.background = '#fff'
        })
    </script>
</body>

</html>
拖动滚动图片轮播图
