0

1 ~ 200 の数字に割り当てられている一連の画像があります。画像 1 の読み込みから始まる 1 つのページが必要です。右矢印ボタンを押すとページ 2 に移動し、左矢印ボタンを押すとページ 1 に戻ります。または、ユーザーが 1 ~ 200 の数字をテキスト ボックスに入力すると、ユーザーはそのページに移動します。HTML で最初の部分を実行することもできましたが、多くのページのリロードが必要になり、面倒でサイトに悪影響を及ぼし、ボックスを機能させることができませんでした。私は JS の経験がないので、どこから始めればよいかわかりません。Google でも何も見つかりませんでした。これを実現するには、何を調べればよいでしょうか。また、これを機能させるコードのスニペットを提供していただけますか? 明らかに私は

<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 に感謝します。

4

1 に答える 1

1

js エラーがあり、内側の If 条件が前の関数に対して適切に閉じられていません。このようなエラーについては、常にデバッグを試みてください。

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;
         }// this was not there before
         else{
            document.getElementById(element).src = imgArray[i-1].src;
            break;
         }
      }
   }
}
于 2013-04-15T07:20:12.493 に答える