一个部分中的多篇文章幻灯片

Question

我目前正在 post 部分的博客网站上工作，您将有多个 post 标题，其中包括一些像这样的幻灯片图像：

https://jsfiddle.net/xs43Lb9y/（您可以点击图片查看幻灯片“作品”）

这是我的 HTML 代码

    <div class="post-slideWrapper"> //in real life you will have multiple of this in one section
        <ul class="post-slide">
            <li class="active">
                <img src="img/article_bg/slide/4.jpg" alt="">
            </li>
            <li>
                <img src="img/article_bg/slide/1.jpg" alt="">
            </li>
            <li>
                <img src="img/article_bg/slide/3.jpg" alt="">
            </li>
        </ul>
        <div class="post-orderWrapper">
            <ul class="post-slideOrder">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

这是我的 javascript :

    var slide_post = document.querySelectorAll('.post-slide'), //get the post slide (which will have multiple )           
        bullet_list = document.querySelectorAll('.post-slideOrder'), //for add style to the bullet
        cur_pos = 0, // This is the one that cause the problem
        isAnimation = false; // just prevent spam click thing
    console.log(bullet_list);
    for (let i = 0; i < slide_post.length; i++) {
        slide_post[i].addEventListener('click', function () {
            var slide_child = this.children,
                bullet_child = bullet_list[i].children;


            if (isAnimation) { // just prevent spam click thing
                return false;
            }
            isAnimation = true; 

            // responsible for the move slide (assume the initial state is hidden , only the one which active is show)
            slide_child[cur_pos].classList.remove('active');
            bullet_child[cur_pos].classList.remove('active');
            if(cur_pos < slide_child.length-1) {
                cur_pos++;
            } else {
                cur_pos = 0;
            }
            slide_child[cur_pos].classList.add('active');
            bullet_child[cur_pos].classList.add('active');


            setTimeout(() => { // just prevent spam click thing
                isAnimation = false;
            }, 800);
            })

    }

我编写的代码只有在只有一张幻灯片时才有效 post（这在真正的博客网站中是永远不会发生的）。当我添加多个 post 有幻灯片时，它将无法正常工作。

我知道问题是因为 cur_pos 值。但是我不知道如何创建一个“slideprocess”函数，以便我页面中所有有幻灯片的 post 都可以使用它来正常运行。
谁能给我解决方案，非常感谢。

Answer 1

我所做的是在函数中关闭您的代码。然后脚本为每个幻灯片调用此函数。

示例：

var wrappers = document.querySelectorAll('.post-slideWrapper');
for (var i = 0; i < wrappers.length; i++) {
    slideShow(wrappers[i]);
}

function slideShow(wrap) {

    var slide_post = wrap.querySelector('.post-slide'); //get the post slide (which will have multiple )           
    var bullet_list = wrap.querySelector('.post-slideOrder'); //for add style to the bullet
    var cur_pos = 0; // This is the one that cause the problem
    var isAnimation = false; // just prevent spam click thing
    var bullet_child;
    var slide_child;
    // console.log(bullet_list);

    slide_post.addEventListener('click', function () {
        slide_child = this.children;
        bullet_child = bullet_list.children;


        if (isAnimation) { // just prevent spam click thing
            return false;
        }
        isAnimation = true;

        // responsible for the move slide (assume the initial state is hidden , only the one which active is show)
        slide_child[cur_pos].classList.remove('active');
        bullet_child[cur_pos].classList.remove('active');
        if (cur_pos < slide_child.length - 1) {
            cur_pos++;
        } else {
            cur_pos = 0;
        }
        slide_child[cur_pos].classList.add('active');
        bullet_child[cur_pos].classList.add('active');


        setTimeout(() => { // just prevent spam click thing
            isAnimation = false;
        }, 800);
    })

}

.content__post {
    max-width: 300px;
    background-color: white;
    display: block;
    width: 100%;
    padding-bottom: 20px;
    margin: 0 auto;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
}

/* POST SLIDE */
.post-slideWrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.post-orderWrapper {}

.post-slideOrder {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-33px);
    display: flex;
    list-style-type: none;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.post-slideOrder li {
    width: 12px;
    height: 12px;
    background-color: black;
    border-radius: 50%;
    margin: 0 5px;
    transition: 0.3s ease-in-out;
}

.post-slideOrder li:hover {
    background-color: white;
}

.post-slideOrder .active {
    background-color: white;
}

.post-slide {
    width: 300%;
    position: relative;
    display: flex;
    cursor: pointer;
    list-style-type: none;
}

.post-slide>li {
    width: 100%;
    position: relative;
    top: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.post-slide>li:nth-child(1) {
    left: 0;

}

.post-slide>li:nth-child(2) {
    left: -33.3333333%;

}

.post-slide>li:nth-child(3) {
    left: -66.6666666%;
}

.post-slide>.active {
    opacity: 1;
    z-index: 1;
}

.post-slide img {
    max-width: 100%;
    display: block;
}

/* END POST SLIDE  */

<!-- in real life you will have multiple of this in one section -->
<div class="post-slideWrapper">
    <ul class="post-slide">
        <li class="active">
            <img src="https://images.unsplash.com/photo-1605797654030-3a167bdf0c67?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY3fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607053810523-091ed202189a?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDc1fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607462109225-6b64ae2dd3cb?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
    </ul>
    <div class="post-orderWrapper">
        <ul class="post-slideOrder">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<!-- in real life you will have multiple of this in one section -->
<div class="post-slideWrapper">
    <ul class="post-slide">
        <li class="active">
            <img src="https://images.unsplash.com/photo-1605797654030-3a167bdf0c67?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY3fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607053810523-091ed202189a?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDc1fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607462109225-6b64ae2dd3cb?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
    </ul>
    <div class="post-orderWrapper">
        <ul class="post-slideOrder">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

一个部分中的多篇文章幻灯片

Multiple article slideshow in one section

html

javascript

css

slideshow

web