Html 如何在同一页面的不同选项卡中显示多个幻灯片
我需要多个幻灯片,但在同一页的不同选项卡中的所有幻灯片 老实说,我不是一个专家,但我试图了解如何重复幻灯片与按钮运行每一个 如果我将这个完整的脚本添加到HTML中,并将所有“.mySlides”CSS类放在页面顶部,它会在一个页面中显示所有幻灯片,所有幻灯片都可以正常工作,但我需要将它们分开Html 如何在同一页面的不同选项卡中显示多个幻灯片,html,css,slideshow,Html,Css,Slideshow,我需要多个幻灯片,但在同一页的不同选项卡中的所有幻灯片 老实说,我不是一个专家,但我试图了解如何重复幻灯片与按钮运行每一个 如果我将这个完整的脚本添加到HTML中,并将所有“.mySlides”CSS类放在页面顶部,它会在一个页面中显示所有幻灯片,所有幻灯片都可以正常工作,但我需要将它们分开 <script> var slideIndex = [1,1,1,1,1,1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"
<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>
而不是全部离开:
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,
.mySlides7, .mySlides8 {display: none}
在每个幻灯片中,我也会根据我使用的幻灯片更改“prev”“next”类的值
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</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>
var slideIndex=[1,1,1];
var slideId=[“mySlides3”]
放映幻灯片(1,0);
放映幻灯片(1,1);
放映幻灯片(1、2);
函数加滑块(n,否){
放映幻灯片(幻灯片索引[no]+=n,no);
}
功能演示幻灯片(n,否){
var i;
var x=document.getElementsByClassName(slideId[no]);
如果(n>x.length){slideIndex[no]=1}
如果(n<1){slideIndex[no]=x.length}
对于(i=0;i
<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>