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

您的代码不起作用，因为slidePrev永远不会低于 5。我已经修改了您的代码。

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

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

只需将 slideprev 功能替换为上述功能，即可正常工作。

Answer 3

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

这是对您的代码的更正，但我建议@Aishwar 的解决方案

Answer 4

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