基于jquery实现的3d旋转轮播

以你之姓@ 2024-04-18 11:52 5阅读 0赞

**先上图:看效果**  
![在这里插入图片描述][2019090611252259.gif]  
**再上代码如下：**  
一、目录结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]  
**二、html+css**

<!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>
            * {
                margin: 0;
                padding: 0;
            }
    
            .tab-content {
                height: 42px;
                perspective: 500px;
                color: #fff;
                font-family: Microsoft YaHei;
                margin-top: 200px;
            }
    
            .check-result-site {
                height: 100%;
                transform-style: preserve-3d;
            }
    
            .check-result-site.animation-next {
                transition: 0.6s;
                transform: rotateX(-90deg);
            }
    
            .check-result-site.animation-prev {
                transform: rotateX(90deg);
            }
    
            .check-result-item {
                height: 100%;
                border: 1px solid #3889DD;
                background: rgba(0, 0, 0, 1);
                box-sizing: border-box;
                position: absolute;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-size: 1vw;
                width: 100%;
            }
    
            .check-result-item.check-result-item-front {
                top: 0;
                transform: translate3d(0, 0, 21px);
                -webkit-transform: translate3d(0, 0, 21px);
                backface-visibility: hidden;
            }
    
            .check-result-item.check-result-item-next-back {
                top: 0;
                transform: rotateX(90deg) translate3d(0, 0, 21px);
                -webkit-transform: rotateX(90deg) translate3d(0, 0, 21px);
                backface-visibility: hidden;
            }
    
            .check-result-item.check-result-item-prev-back {
                top: 0;
                transform: rotateX(-90deg) translate3d(0, 0, 21px);
                -webkit-transform: rotateX(-90deg) translate3d(0, 0, 21px);
                backface-visibility: hidden;
            }
        </style>
    </head>
    
    <body>
        <div class="tab-content">
            <div class="check-result-site">
                <div class="check-result-item">
                    <div>
                        <span>查询结果：</span>
                        <span>3</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>当前显示：第</span>
                        <span>0</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>时间：</span>
                        <span>2019-09-02 12:00:00</span>
                    </div>
    
                    <div>
                        <span>单号：</span>
                        <span>201910000000000000</span>
                    </div>
    
                    <div>
                        <span class="scroll-up"><img src="./img/icon_up.png" alt=""></span>
                        <span class="scroll-down"><img src="./img/icon_down.png" alt=""></span>
                    </div>
    
                    <div>
                        <span>重新查询0</span>
                    </div>
                </div>
    
    
                <div class="check-result-item">
                    <div>
                        <span>查询结果：</span>
                        <span>3</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>当前显示：第</span>
                        <span>1</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>时间：</span>
                        <span>2019-09-02 12:00:00</span>
                    </div>
    
                    <div>
                        <span>单号：</span>
                        <span>201910000000000001</span>
                    </div>
    
                    <div>
                        <span class="scroll-up"><img src="./img/icon_up.png" alt=""></span>
                        <span class="scroll-down"><img src="./img/icon_down.png" alt=""></span>
                    </div>
    
                    <div>
                        <span>重新查询1</span>
                    </div>
                </div>
    
    
                <div class="check-result-item">
                    <div>
                        <span>查询结果：</span>
                        <span>3</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>当前显示：第</span>
                        <span>2</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>时间：</span>
                        <span>2019-09-02 12:00:00</span>
                    </div>
    
                    <div>
                        <span>单号：</span>
                        <span>201910000000000002</span>
                    </div>
    
                    <div>
                        <span class="scroll-up"><img src="./img/icon_up.png" alt=""></span>
                        <span class="scroll-down"><img src="./img/icon_down.png" alt=""></span>
                    </div>
    
                    <div>
                        <span>重新查询2</span>
                    </div>
                </div>
    
    
                <div class="check-result-item">
                    <div>
                        <span>查询结果：</span>
                        <span>3</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>当前显示：第</span>
                        <span>3</span>
                        <span>条</span>
                    </div>
    
                    <div>
                        <span>时间：</span>
                        <span>2019-09-02 12:00:00</span>
                    </div>
    
                    <div>
                        <span>单号：</span>
                        <span>201910000000000003</span>
                    </div>
    
                    <div>
                        <span class="scroll-up"><img src="./img/icon_up.png" alt=""></span>
                        <span class="scroll-down"><img src="./img/icon_down.png" alt=""></span>
                    </div>
    
                    <div>
                        <span>重新查询3</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    
    <script src="js/3dScroll.js"></script>
    <script>
    
    </script>
    
    </html>

**三、3dScroll.js**

//实例
    function FlipSlider(options) {
    //各个dom对象
        var container = options.container,
            startSlideIndex = options.startIndex || 0,
            slider = container,
            slides = slider.querySelectorAll(".check-result-item"),
            nextBtn = $(".scroll-down"),
            PrevBtn = $(".scroll-up"),
            timeout,
            frontSlide,
            backSlide;
        this.nextFlip = function () {
        //点击下一页传1
            doFlip(1);
        };
    
        this.prevFlip = function () {
        //点击上一页传-1
            doFlip(-1);
        };
    
        function doFlip(dir) {
        //根据传的-1和1进行判断
            if (!container.querySelector(".animation-next")) {
                slider.classList.add("animation-next");
    
                if (dir == -1) {
                    slider.classList.add("animation-prev");
                }
    
                frontSlide = slider.querySelector(".check-result-item-front");
                backSlide = findBack(dir);
    
                dir == -1 ? backSlide.classList.add("check-result-item-prev-back") : backSlide.classList.add("check-result-item-next-back");
    
                timeout = setTimeout(function () {
                //transition时间结束以后，所有的class都删除
                    resetSlides(dir);
                    clearTimeout(timeout);
                }, 600);
            }
        }
    
        function resetSlides(dir) {
            frontSlide = slider.querySelector(".check-result-item-front");
            dir == -1 ? backSlide = slider.querySelector(".check-result-item-prev-back") : backSlide = slider.querySelector(".check-result-item-next-back");
    
            backSlide.classList.add("check-result-item-front");
            dir == -1 ? backSlide.classList.remove("check-result-item-prev-back") : backSlide.classList.remove("check-result-item-next-back");
            frontSlide.classList.remove("check-result-item-front");
            slider.classList.remove("animation-next");
            slider.classList.remove("animation-prev");
        }
    
        function findBack(dir) {
        //找到back就是点击后的下一个item
            var frontIndex,
                target,
                slideCount;
    
            slides = slider.querySelectorAll(".check-result-item");
            slideCount = slides.length;
    
            for (var i = 0; i < slideCount; i++) {
                if (slides[i].classList.contains("check-result-item-front")) {
                    frontIndex = i;
                }
            }
    
            if (dir == -1) {
                target = frontIndex < 1 ? slides[slideCount - 1] : slides[frontIndex - 1];
            } else {
                target = (frontIndex + 1) < slideCount ? slides[frontIndex + 1] : slides[0];
            }
    
            return target;
        }
    
        (function (instance) {
            startSlideIndex = startSlideIndex >= slides.length ? 0 : startSlideIndex;
            slides[startSlideIndex].classList.add("check-result-item-front");
            $(nextBtn).on("click", instance.nextFlip);
            $(PrevBtn).on("click", instance.prevFlip);
        })(this);
    }
    
    var flip1 = new FlipSlider({
        startIndex: 0,
        container: document.querySelector(".check-result-site")
    });

**四、说明**  
很简单的代码，jquery.min.js可以自己在任何地方获取。

[2019090611252259.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3a811b8542ea4886a12ef1c9f4b0c903.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/85f00df635334c1c924a983c5cdc04b0.png