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

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函数，那么效果会很好。

如何在Javascript中浏览图片

4 个答案: