Homework SourseHTMLJavascript slide show Using only html and Javascript I a
HTML/Javascript slide show:
Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \"Next\".
Each time the button is pressed, the next image must replace the current one.
Pressing the button while the last image is displayed should return the display to the first image and start the cycle over.
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<meta charset = \"utf-8\"/>
<script type = \"text/javascript\">
var first = \"apple\";
function next(nextimage){
domFirst = document.getElementById(first).style;
domNext = document.getElementById(nextimage).style;
domFirst.zIndex = \"0\";
domNext.zIndex = \"50\";
first = nextimage;
}
</script>
<style type = \"text/css\">
h1 {text-align: center;}
h2 {text-align: center;}
.apple {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.pumpkin {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.banana {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.buttons {text-align: center;}
.paragraph {padding: 50px;}
</style>
</head>
<body>
<p>
<img class = \"apple\" id = \"apple\" height = \"267\" width = \"400\"
src = \"/fruit/apples.jpg\" alt = \"Apple Tree\"/>
<img class = \"pumpkin\" id = \"pumpkin\" height = \"267\" width = \"400\"
src = \"/fruit/pumpkins.jpg\" alt = \"Pumpkin Patch\"/>
<img class = \"banana\" id = \"banana\" height = \"267\" width = \"400\"
src = \"/fruit/bananas.jpg\" alt = \"Banana Bunch\"/>
</p>
<p class = \"buttons\">
<button type = \"button\" onclick = \"next(\'apple\')\">Apples</button>
<button type = \"button\" onclick = \"next(\'pumpkin\')\">Pumpkins</button>
<button type = \"button\" onclick = \"next(\'banana\')\">Bananas</button>
</p>
</body>
</html>
Solution
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<meta charset = \"utf-8\"/>
<script type = \"text/javascript\">
var imageIndex = 1;
showSlides(imageIndex);
function plusSlides(n) {
showSlides(imageIndex += n);
}
function currentSlide(n) {
showSlides(imageIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(\"slides\");
var dots = document.getElementsByClassName(\"dot\");
if (n > slides.length) {imageIndex = 1}
if (n < 1) {imageIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = \"none\";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(\" active\", \"\");
}
slides[imageIndex-1].style.display = \"block\";
dots[imageIndex-1].className += \" active\";
}
</script>
<style type = \"text/css\">
h1 {text-align: center;}
h2 {text-align: center;}
.apple {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.pumpkin {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.banana {position: absolute;
top: 200px;
left: 500px;
z-index: 0}
.buttons {text-align: center;}
.paragraph {padding: 50px;}
</style>
</head>
<body>
<div>
<img class = \"slides\" id = \"apple\" height = \"267\" width = \"400\"
src = \"/fruit/apples.jpg\" alt = \"Apple Tree\"/>
<img class = \"slides\" id = \"pumpkin\" height = \"267\" width = \"400\"
src = \"/fruit/pumpkins.jpg\" alt = \"Pumpkin Patch\"/>
<img class = \"slides\" id = \"banana\" height = \"267\" width = \"400\"
src = \"/fruit/bananas.jpg\" alt = \"Banana Bunch\"/>
<a class=\"next\" onclick=\"plusSlides(1)\">❯</a>
</div>
<p class = \"buttons\">
<span class=\"dot\" onclick=\"currentSlide(1)\"></span>
<span class=\"dot\" onclick=\"currentSlide(2)\"></span>
<span class=\"dot\" onclick=\"currentSlide(3)\"></span>
</p>
</body>
</html>
![HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \](/WebImages/17/htmljavascript-slide-show-using-only-html-and-javascript-i-a-1030868-1761534250-0.webp "HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \")
![HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \](/WebImages/17/htmljavascript-slide-show-using-only-html-and-javascript-i-a-1030868-1761534250-1.webp "HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \")
![HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \](/WebImages/17/htmljavascript-slide-show-using-only-html-and-javascript-i-a-1030868-1761534250-2.webp "HTML/Javascript slide show: Using only html and Javascript, I am trying to change this code (below) so that there\'s only one button labelled \")
