如何获取数组上的第二个索引
我正在尝试迭代图像数组，单独显示每个图像并使用按钮移至下一个图像。但是，当单击按钮时，它会移动到下一个图像，但在第二个图像之后，它不会移动到第三个图像，等等任何人都可以找到循环卡住的地方吗？
function changeImage() {
var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
var currentImage = 0;
currentImage += 1;
if (currentImage >= imageArray.length) {
currentImage = 0;
}
document.getElementById("mainImage").src = imageArray[currentImage]
}
<!DOCTYPE html>
<html>
<head>
<title> App Icons? </title>
<link rel="stylesheet" type="text/css" href="/Users/Website/css/mainstyle.css">
<script type="text/javascript" src="/Users/rate/js/main.js"></script>
</head>
<body class="body">
<div>
<div>
<hr>
<div class=topbar>
<h1> Do you find this App Icon aesthically pleasing</h1>
</div>
<hr>
<div id=displayedImage> </div>
<img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" name="answer" value="1" required><span>1</span></label>
<label><input type="radio" name="answer" value="2" required><span>2</span></label>
<label><input type="radio" name="answer" value="3" required><span>3</span></label>
<label><input type="radio" name="answer" value="4" required><span>4</span></label>
<label><input type="radio" name="answer" value="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
<input type="button" onclick="changeImage()" value="I am complete">
料青山看我应如是1回答
-
眼眸繁星
首先，范围。您currentImage应该全局声明，否则它将始终从 0 开始。其次，数组中最后一个元素的索引等于数组长度减 1，因此您需要currentImage检查imageArray.length - 1：var currentImage = 0;function changeImage() { var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"] if (currentImage >= imageArray.length - 1) { currentImage = 0; } else { currentImage += 1; } document.getElementById("mainImage").src = imageArray[currentImage] console.log(currentImage);}<div> <div> <hr> <div class=topbar> <h1> Do you find this App Icon aesthically pleasing</h1> </div> <hr> <div id=displayedImage> </div> <img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" /> <div id=answer> <label> Strongly Agree </label> <label><input type="radio" name="answer" value="1" required><span>1</span></label> <label><input type="radio" name="answer" value="2" required><span>2</span></label> <label><input type="radio" name="answer" value="3" required><span>3</span></label> <label><input type="radio" name="answer" value="4" required><span>4</span></label> <label><input type="radio" name="answer" value="5" required><span>5</span></label> <label> Strongly disagree</label> <hr> </div> <input type="button" onclick="changeImage()" value="I am complete">
随时随地看视频慕课网APP
相关分类
JavaScript