javascript 使用上一个和下一个按钮制作 Img 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30548820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Img Slideshow with prev and next button
提问by Timothy Wong
How Do I make it so that when I click Next It will go to the next array image and when I click Previous it will go to the previous array image. I am trying to make a image slide show that has two buttons. one to go to the next picture and one to go to the previous picture
我如何制作它以便当我单击 Next 时它将转到下一个阵列图像，而当我单击 Previous时它将转到上一个阵列图像。我正在尝试制作具有两个按钮的图像幻灯片。一个转到下一张图片，一个转到上一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
images[7] = "Images/lab8.jpeg";
var num_img = 7;
var cur_img = 1;
function goback() {
if(cur_img>0)
{
cur_img = cur_img - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
if(cur_img < num_img){
cur_img = cur_img + 1;
}else{
alert("This is the last image");
}
}
</script>
</script>
</head>
<body>
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpeg" alt="lab1" height="500" width="500">
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" style="color:blue" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" style="color:blue" onclick="gofwd();" >
</body>
</html>
回答by Manish
First of all
首先
switchis a keyword in javascript so you can not use it as an identifier. So rename you array of images. give an id to your image in the HTML and then try the code below.
switch是 javascript 中的关键字，因此您不能将其用作标识符。所以重命名你的图像数组。在 HTML 中为您的图像指定一个 id，然后尝试下面的代码。
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
var numimg = 7;
var curimg = 1;
function goback() {
var im=document.getElementById("image");
if(curimg>0)
{
im.src = images[curimg-1];
curimg = curimg - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
var im=document.getElementById("image");
if(curimg < numimg){
im.src = images[curimg+1];
curimg = curimg + 1;
}else{
alert("This is the last image");
}
}
</script>
The HTMl will be like
HTML 会像
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpg" alt="lab1" height="500" width="500" id="image" />
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" onclick="gofwd();" >
