gpt4 book ai didi

javascript - slider 不显示所有图像

转载 作者:行者123 更新时间:2023-11-28 16:21:41 25 4
gpt4 key购买 nike

我不知道为什么我的 slider 按钮不起作用,它们也没有显示所有图像....bruhhhhhhhh 有人请帮忙

                            <div class="slides">
<img src="../page_images/1.jpeg" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="../page_images/2.jpeg" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="../page_images/3.jpeg" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="../page_images/4.jpeg" width="100%" height="100%"/>
</div>

❮❯

和java脚本

        var index = 1;

function plusIndex(n){
index = index + n;
showImage(index);
}


showImage(index);

function showImage(n){
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length){
index = 1;
}
if(n < x.length){
index = x.length;
}
for(i=0; i<x.length;i++){
x[i].style.display = "none";
}
x[index-1].style.display = "block";
}

最佳答案

这是解决方案 -

你只需要改变n < x.length条件

var index = 1;

function plusIndex(n) {
index = index + n;
showImage(index);
}


showImage(index);

function showImage(n) {
var i;
var x = document.getElementsByClassName("slides");
if (n > x.length) {
index = 1;
}
if (n <= 0) {
index = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
}
<div class="marbletypeleft">




<div class="slides">
<img src="../page_images/1.jpeg" alt="1" width="100%" height="100%" />
</div>
<div class="slides">
<img src="../page_images/2.jpeg" alt="2" width="100%" height="100%" />
</div>
<div class="slides">
<img src="../page_images/3.jpeg" alt="3" width="100%" height="100%" />
</div>
<div class="slides">
<img src="../page_images/4.jpeg" alt="4" width="100%" height="100%" />
</div>

<button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094</button>
<button class="btn" onclick="plusIndex(1)" id="btn2">&#10095</button>
</div>

关于javascript - slider 不显示所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50667182/

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