javascript - 幻灯片按钮仅在进入最后一张幻灯片时在第二次单击时起作用
问题描述
我正在制作一个使用 JSON 数据填充其内容的幻灯片。当我来到最后一张幻灯片时,我必须单击 2-3 次,然后幻灯片才能再次在第一张幻灯片上开始。我想确保不会发生这种情况,并且单击一次就足以再次从第一张幻灯片开始。一个类似的错误是,当我第一次加载页面并第一次单击后退按钮时,我必须单击两次,然后它才能正常工作。我确信我的一个 if 语句有问题,但我不知道出了什么问题。
index.html
<div class="slideshow-container">
<div class="mySlides fade">
<img id="image" style="width:100%" >
<div id="description"></div>
</div>
<a id="prev">❮</a>
<a id="next">❯</a>
</div>
<script>
window.onload = startup;
var xmlhttp;
function startup () {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = statechange;
xmlhttp.open("GET", "slideshow.json", true);
xmlhttp.send();
}
function statechange() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var printout = " ";
var doc = JSON.parse(xmlhttp.responseText);
var amountOfElements = doc.length;
var current = 0;
var imagePath = "assets/stop2/";
document.getElementById("image").src = imagePath + doc[current].image;
document.getElementById("description").innerHTML = doc[current].text;
console.log(current);
prev.onclick = function() {
if(current !== 0){
current = current - 1;
document.getElementById("image").src = imagePath + doc[current].image;
document.getElementById("description").innerHTML = doc[current].text;
if(current === 0) {
current = amountOfElements;
}
}
else {
current = amountOfElements;
}
console.log(current);
};
next.onclick = function() {
if(current < amountOfElements) {
current = current + 1;
document.getElementById("image").src = imagePath + doc[current].image;
document.getElementById("description").innerHTML = doc[current].text;
}
else {
current = -1;
}
console.log(current);
};
}
else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
alert("Something went wrong");
}
}
</script>
slideshow.json
{
"name": "First image",
"text": "blablabla",
"image": "img1.png",
"audio": "audio1.mp3"
},
{
"name": "Second image",
"text": "Lorem ipsum..",
"image": "img2.png",
"audio": "audio2.mp3"
},
{
"name": "Third image",
"text": "blablabla",
"image": "img3.png",
"audio": "audio3.mp3"
},
{
"name": "Last image",
"text": "blablablaaaaaa",
"image": "img4.png",
"audio": "audio4.mp3"
}
] ```
解决方案
如果你想要一个无限循环行为,试试这个:
var updateUI = function() {
document.getElementById("image").src = imagePath + doc[current].image;
document.getElementById("description").innerHTML = doc[current].text;
}
prev.onclick = function() {
if(current <= 0) {
current = amountOfElements - 1; // index of last element
}
else {
current--; // just decrement
}
console.log(current);
updateUI();
};
next.onclick = function() {
if(current < amountOfElements - 1) {
current++; // just increment
}
else {
current = 0; // start at first element
}
console.log(current);
updateUI();
};
问题是,current = -1
并且current = amountOfElements
超出了界限,因此您需要增加和减少一到三倍,直到索引“有效”。
推荐阅读
- c++ - 使用 ++ 作为通过类成员访问语句的前缀不会导致错误
- java - Appium Flutter 驱动程序 | capabilities.setCapability("automationName", "Flutter") 失败
- python - 如何修复字符串计数中出现意外字符的问题
- java - 是否可以在 JButton 中概述文本?
- perl - 如果它是文件名的一部分,为什么 PodSpelling 会抱怨忽略的单词?
- php - 将短代码输出存储为 WordPress 函数中的变量
- python - Flask-SQLalchemy 错误说我的表没有名为 x 的列
- javascript - 快乐数字算法问题解决方案不起作用
- image - 将具有不同大小的四边形图像批量裁剪为圆形
- grpc - 在 gRPC 中返回多个项目:重复列表或流单个对象?