1

我正在尝试制作我的页面，以便用户可以键入 1 到 200 之间的数值来访问他们想要查看的任何图像。我已经玩过代码，但我似乎无法得到任何工作。下面是我尝试使用的代码。我究竟做错了什么？

编辑：新代码：

`
<html>
<head>
<title></title>
</head>
<body style="background-color: teal;">
<form>
<center>
<div width="50%" style="width: 50%;">
<div id="main" align="middle">
<img src="page1.jpg" alt="" id="mainImg" height="90%">
</div> 
<div id="imglist">
<a href="javascript:previousImage('mainImg')"><img src="previous.png" alt="" 
align="left"></a>
<input id="myid" name="myid" size="3" type="text"></input>
<a href="javascript:nextImage('mainImg')"><img src="next.png" alt="" align="right"></a>
<script>
var imgArray = new Array();

var imgs = [];
for (var i = 0; i < 200; i++) {
imgs[i] = new Image();
imgs[i].src = "page" + (i + 1) + ".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;
         }
      }
   }
}

window.onload = function() {
   var elm = document.getElementById("myid"),
   var img = document.getElementById("mainImg");
   elm.onkeyup = function(event) {
      if (this.value) {
         var num = parseInt(this.value, 10);
             if (num >= 1 && num <= 200 {
            img.src = "page" + num + ".jpg";
         }
      }
   }
} 
</script>
</div>
</div>
</center>
</form>
</body>
</html>
4

1 回答 1

1

也许你的意思是：

if (this.value.length === 1,2,3) {

变成这样：

if (this.value.length <= 3) {

此外，我认为您希望将整个输入值转换为数字，而不是使用单个键码。

我可能会建议这种更干燥的不同/更简单的方法（不要重复自己）：

// preload images
var imgs = [];
for (var i = 0; i < 200; i++) {
    imgs[i] = new Image();
    imgs[i].src = "page" + (i + 1) + ".jpg"; 
}

window.onload = function() {
   var elm = document.getElementById("myid");
   var img = document.getElementById("mainImg");
   elm.onkeyup = function(event) {
      if (this.value) {
          var num = parseInt(this.value, 10);
          if (num >= 1 && num <= 200) {
              img.src = "page" + num + ".jpg";
          }
      }
   }
}

工作演示：http: //jsfiddle.net/jfriend00/4dqbP/

变更摘要：

  1. 在循环中预加载图像而不是复制代码
  2. 动态构建图像名称
  3. 将img变量设置为局部变量，而不是var前面的隐式全局变量
  4. 检查输入字段是否为空
  5. 用于parseInt()将输入字段的值解析为数字
  6. 范围检查解析的数字
  7. 如果在有效范围内，则使用该数字构造图像名称
于 2013-04-16T22:29:55.557 回答