模拟吹制手指滑动轮播以及自动轮播效果

最新推荐文章于 2024-10-09 00:58:21 发布

矢量纸盒

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量61

点赞数

分类专栏：轮播文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_45203811/article/details/117596710

版权

轮播专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript实现一个手动滑动和自动轮播的效果。通过HTML结构、CSS样式以及JavaScript逻辑，创建了一个可上下滑动的轮播组件。在用户上滑和下滑时，轮播图片会根据滑动方向动态切换，并在滑动结束后恢复自动轮播。此外，代码还包含了节流锁机制，以避免快速滑动时的过度渲染。

摘要由CSDN通过智能技术生成

代码如下

html

1.首先创建骨架

<div id="swiper" class="swiper">
        <div id="swiperContent" class="swiper-content">
            <div class="swiper-item">2</div>
            <div class="swiper-item">3</div>
            <div class="swiper-item">1</div>
            <div class="swiper-item">2</div>
            <div class="swiper-item">3</div>
            <div class="swiper-item">1</div>
            <div class="swiper-item">2</div>
        </div>
    </div>

2.样式

 .swiper {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            background: #666;
            overflow: hidden;
        }

        .swiper-content {
            width: 100%;
            transition: transform 0.5s ease 0s;
            transform: translateY(-225px);
        }

        .swiper-item {
            width: 450px;
            height: 200px;
            margin: 25px;
            position: relative;
            top: 25px;
            background: #999;
        }

3.实现逻辑

 (function () {
            var swiper = document.getElementById('swiper')
            var swiperContent = document.getElementById('swiperContent')
            var swiperItems = document.getElementsByClassName('swiper-item')
            var idy = 2
            //函数节流锁
            var lock = true
            var timer = null

            //自动轮播实现
            timer = setInterval(() => {
                idy++
                console.log(idy)
                swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                if (idy === 5) {
                    setTimeout(function () {
                        swiperContent.style.transition = "none"
                        swiperContent.style.transform = "none"
                        idy = 2
                        swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                    }, 500);
                }
                swiperContent.style.transition = "transform 0.5s ease 0s"
            }, 3000)

            swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
            //判断向上滑动还是向下滑动
            var startY, distance, direction
            swiper.onmousedown = function (e) {
                startY = e.clientY
            }
            swiper.onmousemove = function (e) {
                e.preventDefault()
            }
            swiper.onmouseup = function (e) {
                var endY = e.clientY
                distance = parseInt(endY - startY)
                // console.log(distance)
                direction = 0
                if (distance > 0 && distance > 50) {
                    direction = -1
                }
                if (distance < 0 && distance < -50) {
                    direction = 1
                }

                //根据滑动方向来控制图片运动
                play(direction)

            }

            function play(direction) {
                clearInterval(timer)
                swiperContent.style.transition = "transform 0.5s ease 0s"
                if (direction === 1) {
                    if (!lock) {
                        return;
                    }
                    lock = false;
                    idy++
                    console.log(idy)
                    swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                    if (idy === 5) {
                        setTimeout(function () {
                            swiperContent.style.transition = "none"
                            swiperContent.style.transform = "none"
                            idy = 2
                            swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                        }, 500);
                    }
                    setTimeout(function () {
                        lock = true;
                    }, 500)
                }

                if (direction === -1) {
                    if (!lock) {
                        return;
                    }
                    lock = false;
                    idy--
                    console.log(idy)
                    swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                    if (idy === 1) {
                        setTimeout(function () {
                            swiperContent.style.transition = "none"
                            swiperContent.style.transform = "none"
                            idy = 4
                            swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                        }, 500);
                    }
                    setTimeout(function () {
                        lock = true;
                    }, 500)
                }
                timer = setInterval(() => {
                    idy++
                    console.log(idy)
                    swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                    if (idy === 5) {
                        setTimeout(function () {
                            swiperContent.style.transition = "none"
                            swiperContent.style.transform = "none"
                            idy = 2
                            swiperContent.style.transform = "translateY(" + -225 * idy + "px)"
                        }, 500);
                    }
                    swiperContent.style.transition = "transform 0.5s ease 0s"
                }, 3000)
            }
        })()