当我单击箭头时，我可以幻灯片放映图像，我正在放映幻灯片，但顺序不正确？大多数情况下，如果条件仅在单击左箭头时出现错误，并且在单击时我得到“-”值，并且两个箭头的条件没有正确排序，因为这两个箭头都不会保持正确的顺序？
var selectingImages = document.getElementsByClassName("class1");
var clickArrowright = document.getElementById("arrowRight");
var clickArrowleft = document.getElementById("arrowLeft");
var i = 0;
clickArrowright.addEventListener('click', arrowHandler, true)
function arrowHandler(e) {
console.log(i)
i = (i < selectingImages.length) && (i >= 0) ? i : 0;
if (i < selectingImages.length) {
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);
i++;
}
}
/* var i=selectingImages.length; */
clickArrowleft.addEventListener('click', arrowlefthandler, true)
function arrowlefthandler(e) {
console.log(i)
i = i > 0 ? i : selectingImages.length - 1;
if (i > 0) {
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);
i--;
}
}.first-image {
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0%;
}
.arrow-right {
position: absolute;
top: 50%;
left: 45%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style.css"rel="stylesheet">
<title>Document</title>
</head>
<body>
<img src="images/nature.jpeg" class="first-image" id="firstImage" width="50%">
<img src="images/bigarrowleft.png" class="arrow-left" id="arrowLeft">
<img src="images/bigarrowright.png" class="arrow-right" id="arrowRight">
<br>
<br>
<img src="images/blank.jpg" class="class1" width="10%">
<img src="images/blank2.jpg" class="class1" width="10%">
<img src="images/form.jpg" class="class1" width="10%">
<img src="images/form2.jpg" class="class1" width="10%">
<img src="images/cricket.jpeg" class="class1" width="10%">
<img src="images/image.jpeg" class="class1" width="10%">
<script src="app.js">
</script>
</body>
</html>最佳答案
您在左箭头中设置 i 的条件不正确(i 永远不会达到 selectedImages.length - 1)，使其成为
i = i > 0 ? i - 1 : selectingImages.length - 1; // after ? i should be i - 1
之后不需要if条件和递减，直接写
i = i > 0 ? i - 1 : selectingImages.length - 1;
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);
类似右箭头
i = i < selectingImages.length - 1 ? i + 1 : 0; //i+1 after question mark and single condition is enough
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);
关于javascript - 使用 javascript 创建带箭头的幻灯片图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49686785/