Question

我正在尝试制作一个＆＃34;幻灯片＆＃34;使用HTML和JavaScript。我希望每次按下我设置的按钮时图像都会改变（参见下面的代码）。我已经多次检查过我的代码了，当我点击输入按钮时，我找不到图像如何变化的问题。这是我到目前为止所拥有的：

<html>
<head>
<title>test</title>
<script type="text/javascript">
var imgArray ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"];
var capArray ["Processor", "Motherboard", "Computer Case", "RAM", "Graphics Card", "Hard Drive" "Optical Drive"];

var imgIndex = imgArray.length -1;

function showImage(index) 
{
    document.getElementById('imgGallery').src       = imgArray[index];
    document.getElementById('imgGallery').alt       = capArray[index];
    document.getElementById('imgGallery').title     = capArray[index];
    document.getElementById('imgCaption').innerHTML = capArray[index];
}
function nextImage() 
{
    imgIndex++;
    imgIndex = imgIndex % imgArray.length;
    showImage(imgIndex);
}
function prevImage() 
{
 imgIndex--;
 if (imgIndex < 0) { imgIndex = imgArray.length  -1; }
 imgIndex = iIndex % imgArray.length;
 showImage(imgIndex);
}
</script>
</head>

<body onload="nextImage();">
<div>
<div>
    Computer Parts
</div>
<img id="imgGallery"  alt="Processor" src="images/1.jpg" title="Processor" />
        <div id="imgCaption">
            Processor
        </div>
<br />
<input type="button" value="<" onclick="prevImage();"> </input>
<input type="button" value=">" onclick="nextImage();"> </input>
</div>
</body>
</html>

提前致谢。

Answer 1

你有很多随机错误。数组没有=，缺少逗号和拼写错误的变量。这是您的代码的工作版本。

<html>
<head>
<title>test</title>
<script type="text/javascript">
var imgArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"];
var capArray = ["Processor", "Motherboard", "Computer Case", "RAM", "Graphics Card", "Hard Drive", "Optical Drive"];

var imgIndex = imgArray.length -1;

function showImage(index) 
{
    document.getElementById('imgGallery').src       = imgArray[index];
    document.getElementById('imgGallery').alt       = capArray[index];
    document.getElementById('imgGallery').title     = capArray[index];
    document.getElementById('imgCaption').innerHTML = capArray[index];
}
function nextImage() 
{
    imgIndex++;
    imgIndex = imgIndex % imgArray.length;
    showImage(imgIndex);
}
function prevImage() 
{
 imgIndex--;
 if (imgIndex < 0) { imgIndex = imgArray.length  -1; }
 imgIndex = imgIndex % imgArray.length;
 showImage(imgIndex);
}
</script>
</head>

<body onload="nextImage();">
<div>
<div>
    Computer Parts
</div>
<img id="imgGallery"  alt="Processor" src="images/1.jpg" title="Processor" />
        <div id="imgCaption">
            Processor
        </div>
<br />
<input type="button" value="<" onclick="prevImage();"> </input>
<input type="button" value=">" onclick="nextImage();"> </input>
</div>
</body>
</html>

Answer 2

在控制台中检查您的JavaScript语法。您错过了数组变量的赋值（等于字符）。还缺少第二个数组中的逗号。这就是你想要的：

var imgArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"];
var capArray = ["Processor", "Motherboard", "Computer Case", "RAM", "Graphics Card", "Hard Drive", "Optical Drive"];

Javascript图库

2 个答案: