【发布时间】：2021-01-07 15:43:08
【问题描述】：
我目前正在博客网站的帖子部分工作，您将有多个帖子标题，其中包括一些带有幻灯片的标题，如下所示：
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);
})
}
我写的代码只有在只有一个幻灯片帖子的情况下才有效（这在真实的博客网站中是永远不会发生的）。当我添加多个有幻灯片的帖子时，它会无法正常工作。
我知道问题在于 cur_pos 值。但是我不知道如何创建一个“slideprocess”功能，以便我页面中所有有幻灯片的帖子都可以使用它来正常运行。
谁能给我解决方案，非常感谢。
【问题讨论】：
标签： javascript html css web slideshow