Javascript 如何在不使用任何插件的情况下，在弹出窗口中制作一个类似洗牌效果的滑块？

免责声明：-再次询问此问题，因为我的pervious已被社区关闭，目前由于缺乏信息而不接受答案 由我提供的详细信息。

我的最终目标是创建一个类似于此网站滑块（）的滑块。 查看滑块的步骤：-

• 去
• 点击“发送圣诞卡”按钮
• 单击任何图像打开弹出窗口，滑块位于弹出窗口内

因此，当前每当我点击任何图像时，弹出窗口就会出现，但我的第一张图像位于顶部，因为最高的

z-index

。我真正想要的是，每当用户单击任何图像时，该特定图像应具有最高的z索引，其他图像将根据该特定图像的z索引遵循z索引，如示例网站（）中所示

在此之后，每当我点击上一个按钮时，我也会被上一个按钮的概念所困扰，它正在添加动画输出类，但是setZIndex函数不能正常工作。下一个按钮功能运行良好，特别感谢雷诺，我从他那里得到了下一个按钮功能的帮助

下面是一个工作示例

下面是我的代码

index.html文件

main.js文件

$（函数（）{
var galleryWrapper=$（'.gallery wrapper'）；
galleryWrapper.each（函数（）{
变量$this=$（this），
galleryPopup=$this.find（'.galleryPopup'），
prevBtn=$this.find（'.prev btn'），
nextBtn=$this.find（'.next btn'），
posts=$this.find（'.post'），
电流=0
//-----单击任何项目链接打开弹出窗口
// --------------------------------------------
$this.find（'.item link'）。on（'click'，函数（事件）{
event.preventDefault（）；
galleryPopup.fadeIn（）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//-----单击关闭链接关闭弹出窗口
// --------------------------------------------
$this.find（'.close link'）。on（'click'，函数（事件）{
event.preventDefault（）；
galleryPopup.fadeOut（）；
$（'body，html'）.css（'overflow'，'initial'）；
})
//-----弹出滑块脚本
// --------------------------------------------
函数setZIndex（）{
for（设i=0；i

<div class="gallery-wrapper">
    <div class="gallery-row">
        <div class="item">
            <a href="#" class="item-link">
                <img src="https://images.unsplash.com/photo-1602642753381-030eacbf4a58?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
            </a>
        </div>
        <div class="item">
            <a href="#" class="item-link">
                <img src="https://images.unsplash.com/photo-1602609741544-de5fc39b88ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
            </a>
        </div>

        <div class="item">
            <a href="#" class="item-link">
                <img src="https://images.unsplash.com/photo-1602608646744-6a03235141c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
            </a>
        </div>
        <div class="item">
            <a href="#" class="item-link">
                <img src="https://images.unsplash.com/photo-1602607878796-baf56d8dfc8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2200&q=80" />
            </a>
        </div>
        <div class="item">
            <a href="#" class="item-link">
                <img src="https://images.unsplash.com/photo-1602653077972-0a5a38f9a466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2458&q=80" />
            </a>
        </div>
    </div>


    <!-- Gallery Popup -->
    <div class="gallery-popup">
        <a href="javascript:void(0)" class="close-link">x</a>
        <div class="collection">
            <div class="post">
                <img src="https://images.unsplash.com/photo-1602642753381-030eacbf4a58?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
            </div>
            <div class="post">
                <img src="https://images.unsplash.com/photo-1602609741544-de5fc39b88ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
            </div>
            <div class="post">
                <img src="https://images.unsplash.com/photo-1602608646744-6a03235141c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
            </div>
            <div class="post">
                <img src="https://images.unsplash.com/photo-1602607878796-baf56d8dfc8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2200&q=80" />
            </div>
            <div class="post">
                <img src="https://images.unsplash.com/photo-1602653077972-0a5a38f9a466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2458&q=80" />
            </div>
        </div>

        <div class="button-holder">
            <button class="prev-btn">Previous</button>
            <button class="next-btn">Next</button>
        </div>
    </div>
    <!-- End of Gallery Popup -->
</div>

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        overflow-x: hidden !important;
    }
    
    .gallery-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
    }
    
    .collection {
        max-width: 300px;
        margin: 0 auto;
        perspective: 1500px;
        position: absolute;
        left: 50%;
        top: 120px;
        transform: translateX(-50%);
        width: 100%;
    }
    
    .post {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 400px;
        background: orangered;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        transform-style: preserve-3d;
        transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005);
    }
    
    .post img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .animate {
        transform: translate3d(350px, 25px, -400px);
    }
    
    .animate-out {
        transform: translate3d(350px, 15px, -100px);
    }
    
    .button-holder {
        position: absolute;
        bottom: 50px;
        width: 100%;
        text-align: center;
    }
    
    .button-holder button {
        margin: 5px;
        width: 70px;
        height: 30px;
        border-radius: 0;
        border: none;
        background: orangered;
        color: #fff;
    }
    
    .close-link {
        color: #fff;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        line-height: 34px;
        text-align: center;
        text-decoration: none;
        font-size: 18px;
        font-family: 'Arial';
        background: orangered;
    }
    
    .gallery-row {
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .gallery-row .item {
        padding: 10px;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .gallery-row .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

$(function() {

        var galleryWrapper = $('.gallery-wrapper');

        galleryWrapper.each(function() {
            var $this = $(this),
                galleryPopup = $this.find('.gallery-popup'),
                prevBtn = $this.find('.prev-btn'),
                nextBtn = $this.find('.next-btn'),
                posts = $this.find('.post'),
                current = 0


            // -------- Opening popup by clicking on any item-link
            // --------------------------------------------

            $this.find('.item-link').on('click', function(event) {
                event.preventDefault();
                galleryPopup.fadeIn();
                $('body, html').css('overflow', 'hidden');
            });

            // -------- Closing popup by clicking on close-link
            // --------------------------------------------

            $this.find('.close-link').on('click', function(event) {
                event.preventDefault();
                galleryPopup.fadeOut();
                $('body, html').css('overflow', 'initial');
            })

            // -------- Popup slider script
            // --------------------------------------------

            function setZIndex() {
                for (let i = 0; i < posts.length; i++) {
                    const post = posts[i];
                    const {
                        zIndex
                    } = post.style;

                    post.style.zIndex = zIndex ? (Number(zIndex) + 1) % posts.length : posts.length - i - 1;
                }
            }

            nextBtn.on('click', function() {
                const post = posts[current];
                post.classList.add('animate');

                setTimeout(function() {
                    post.classList.remove('animate');
                    setZIndex();
                }, 300);

                current = (current + 1) % posts.length;
            });

            prevBtn.on('click', function() {
                const post = posts[current];
                post.classList.add('animate-out');

                setTimeout(function() {
                    post.classList.remove('animate-out');
                    setZIndex();
                }, 300);

                current = (current - 1) % posts.length;
            });

            setZIndex();
        });
    });