Question

我有一系列图像，通过点击逐个显示，以及用户可以选择要查看的图像的选项块。我想选择连接数组并显示当前显示图像的数量（或索引）。也许你建议我如何做到这一点。这是我的代码：

<!DOCTYPE html>

<head>
 <meta charset="UTF-8">
<script type="text/javascript">
 var Image_array = [
        ["00.jpg", "1"],
        ["01.jpg", "2"],
        ["02.jpg", "3"],
        ["03.jpg", "4"],
        ["04.jpg", "5"],
        ["05.jpg", "6"],
        ["06.jpg", "7"]
      ]
function setf(thisv)
{
if (i == Image_array.length) i = 0;
rotatorbutton.src = Image_array[thisv][0];
}
var i = 0;
function right() {
 i++;
 if (i == Image_array.length) i = 0;
 rotatorbutton.src = Image_array[i][0];
 }
 </script>
</head>
<body >
<div onclick="right()">
    <script type = 'text/javascript'>
    document.write("<img id = 'rotatorbutton' src = '" + Image_array[0] + "' alt = ''/> ");
    </script>
</div>

<div class="pager">
    <form name="billy">
        <select name="option1" id="option" onchange="setf(this.selectedIndex)">
            <script type = "text/javascript">
                for (i = 0; i < Image_array.length; i++)
                {
                document.write("<option>" + Image_array[i][1]);
                }
            </script>
        </select>
            <script type="text/javascript">
            setf(0);
            </script>
</div>
</form>
</div>
<body>

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style></style>
    <script>
      var imageArray = [
        ["00.jpg", "1"],
        ["01.jpg", "2"],
        ["02.jpg", "3"],
        ["03.jpg", "4"],
        ["04.jpg", "5"],
        ["05.jpg", "6"],
        ["06.jpg", "7"]
      ]

      function addOptions(){
        var select = document.getElementById("select")
        for(var i = 0; i < imageArray.length; ++i){
          var option = document.createElement("option")
          option.innerHTML = imageArray[i][1]
          select.appendChild(option)
        }
      }

      function addRotation(){
        var select = document.getElementById("select")
        var image = document.getElementById("image")
        select.addEventListener("change", function(event){
          image.src = imageArray[this.selectedIndex][0]
        })
      }

      window.addEventListener("load", addOptions)
      window.addEventListener("load", addRotation)
    </script>
  </head>
  <body>
    <form>
      <img src="00.jpg" id="image">
      <select id="select">
      </select>
    </form>
  </body>
</html>

我发现您的代码存在一些问题。

您不应该使用document.write，因为有一些新的更好的方法可以从脚本中添加内容，例如使用Document对象模型。
像Edwin所说，你不应该使用＆＃34; new Array（）＆＃34;。
同样Edwin提到你应该缩进你的代码。
在功能＆＃34; setf＆＃34;你用过＆＃34;我＆＃34;而不是＆＃34; thisv＆＃34;。
你忘了关闭标签＆＃34;＆＃34;。

上面我给你一个解决方案作为例子。

在选项框中显示数组索引

1 个答案: