javascript - Javascriptで画像をナビゲートする方法

Question

次のボタンと前のボタンをクリックすると画像が変わる画像スライダーがあります。したがって、ユーザーが次をクリックすると、シーケンス内の次の画像がポップアップし、ユーザーが前をクリックすると、前の画像がポップアップします。次の関数は問題なく動作しますが、前の関数を動作させることができないようです。

<script type="text/javascript">


var image1 = new Image();
var image2 = new Image();
var image3 = new Image();
var image4 = new Image();
var image5 = new Image();
var image6 = new Image();
var image7 = new Image();
var image8 = new Image();
var image9 = new Image();
var image10 = new Image();
var image11 = new Image();

image1.src="jokes.png";
image2.src="facts.png";
image3.src="riddles.png";
image4.src="html.png";
image5.src="xml.png";


</script>

<img alt="previous" id="prev" src="prev_ctrl.png" width=60 height=60 onClick="slideprev()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="jokes.png" name="slide" width="200" height="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img id="next" src="next_ctrl.png" alt="next" width=60 height=60 onClick="slidenext()">
<script type="text/javascript">
var step = 1;

function slidenext() {
  document.images.slide.src = eval("image" + step + ".src");
  if (step < 5){ 
     step++;
   }else{ 
    step = 1;
    }
}

function slideprev() {
  document.images.slide.src = eval("image" + step + ".src");
  if (step >= 5){ 
     step--;
   }else{ 
    step = 5;
    }
}


</script>

Answer 1

slidePrev5を下回ることはないため、コードは機能しません。コードを変更しました。

var step = 0;
var images = [ "jokes.png", "facts.png", "riddles.png", "html.png", "xml.png"];
var stepLimit = images.length - 1;

function slideNext() {
   step = Math.min(step + 1, stepLimit);
   document.images.slide.src = images[step]
}

function slidePrev() {
   step = Math.max(step - 1, 0);
   document.images.slide.src = images[step]
}

Answer 2

var imgsrc="image" + step + ".src";   
document.images.slide.src=imgscr;

Answer 3

document.images.slide.src = window["image" + step].src;

これはあなたのコードの修正ですが、@Aishwarの解決策をお勧めします

Answer 4

function slideprev() {
  document.images.slide.src = "image"+step+".png";
      if (step <= 5 && step > 1){ 
         step--;
        }else{ 
             step = 5;
        }
    }

slideprev関数を上記に置き換えるだけで、うまく機能します。