我有一系列分配给数字 1-200 的图像。我想要一个从加载图像 1 开始的页面,如果按下右箭头按钮,它会转到第 2 页,然后如果按下左箭头按钮,它将返回第 1 页,依此类推。或者,用户可以在文本框中键入一个 1-200 的数字,它会将用户带到该页面。我可以在 HTML 中完成第一部分,但它需要重新加载大量页面,这很麻烦而且对网站不利,而且我无法让盒子工作。我以前没有 JS 的经验,所以我不知道从哪里开始。我在谷歌上也找不到任何东西。我应该怎么做才能做到这一点?另外,您能否提供一段代码来完成这项工作?显然我'
<html>
<head>
<title></title>
</head>
<body>
<div id="main">
<img src="photo1.jpg" alt="" id="mainImg">
</div>
<div id="imglist">
<a href="javascript:previousImage('mainImg')"><img src="previous.jpg" alt=""></a>
<a href="javascript:nextImage('mainImg')"><img src="next.jpg" alt=""></a>
<script>
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'photo1.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'photo2.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'photo3.jpg';
function nextImage(element)
{
var img = document.getElementById(element);
for(var i = 0; i < imgArray.length;i++)
{
if(imgArray[i].src == img.src) // << check this
{
if(i === imgArray.length){
document.getElementById(element).src = imgArray[0].src;
break;
}
document.getElementById(element).src = imgArray[i+1].src;
break;
}
}
}
function previousImage(element)
{
var img = document.getElementById(element);
for(var i = 0; i < imgArray.length;i++)
{
if(imgArray[i].src == img.src)
{
if(i === 0){
document.getElementById(element).src = imgArray[imgArray.length-1].src;
break;
}
else{
document.getElementById(element).src = imgArray[i-1].src;
break;
}
}
}
}
</script>
</body>
</html>
箭头的当前工作代码。感谢 anpsmn 让我到达那里。