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
<!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>
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
<!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>
1 Answer
Reset to default 1First of all
switch is 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.
<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
<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();" >
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745284123a4620455.html
评论列表（0条）