gpt4 book ai didi

html - 如何在同一页面的不同选项卡中显示多个幻灯片

转载 作者:太空宇宙 更新时间:2023-11-04 06:08:31 28 4
gpt4 key购买 nike

我需要多个幻灯片,但它们都在同一页面的不同选项卡中。

老实说,我不是专家,但我正在尝试了解如何使用为每个幻灯片运行的按钮来重复幻灯片放映。

如果我将这个完整的脚本添加到页面顶部的所有“.mySlides”CSS 类的 HTML 中,它会在一个页面中显示所有幻灯片,它们都可以正常工作,但我需要将它们分开.

<script>
var slideIndex = [1,1,1,1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4",
"mySlides5", "mySlides6", "mySlides7", "mySlides8"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
showSlides(1, 5);
showSlides(1, 6);
showSlides(1, 7);

function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>

所以我复制幻灯片 HTML 并相应地更改 ID。

在每个窗口中,我将“.mySlides”类添加到页面顶部的 CSS,并且我只添加我在该窗口中使用的那个。

.mySlides3 {display: none}

而不是全部保留:

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,  
.mySlides7, .mySlides8 {display: none}

在每个幻灯片中,我还根据我正在使用的幻灯片更改“上一个”“下一个”类的值。

  <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
<a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
</div>

这是一个单独的幻灯片的脚本,但是当我在另一个窗口中重复它时,它会显示具有不同图像的不同幻灯片,但所有幻灯片的箭头都不起作用。

我一直在删除 slideIndex、slideId 和 showSlides 值,只留下我正在使用的幻灯片之前的值,对于“mySlides3”,我这样保留:

<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>

最佳答案

关于html - 如何在同一页面的不同选项卡中显示多个幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56613940/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com