What is the solution to this exercise? Run the application to see the buttons th
ID: 3734754 • Letter: W
Question
What is the solution to this exercise?
Run the application to see the buttons that have been added below the slides. Note, however, that the buttons don’t work, and the slides are advancing based on an interval timer. In the JavaScript file, replace the interval timer with an event handler for the Next button. That handler can use the same code for advancing the slides that the interval timer used. After the event handler for the Next button, add an event handler for the Previous button. This will require a minor modification to the code that’s used for advancing the slides. However, this requires some careful thought about how the image counter variable needs to be adjusted when going from one slide to the previous slide, especially when going from the first slide to the last slide.
I'm given the HTML, CSS, and Javascript, which is: (I'm unable to link the images used, please substitute your own)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<ul id="image_list">
<li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li>
<li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li>
<li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li>
<li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li>
<li><a href="images/lures.jpg" title="The Lures for Catching"></a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p>
<img src="images/casting1.jpg" alt="" id="image">
</p>
<input type="button" value="Previous" name="previous" id="previous">
<input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>
________________
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 380px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
ul {
display: none;
}
img {
height: 250px;
}
__________________
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var listNode = $("image_list");
var captionNode = $("caption");
var imageNode = $("image");
var links = listNode.getElementsByTagName("a");
// Process image links
var i, linkNode, image;
var imageCache = [];
for ( i = 0; i < links.length; i++ ) {
linkNode = links[i];
// Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
imageCache.push(image);
}
// Start slide show
var imageCounter = 0;
var timer = setInterval(
function () {
imageCounter = (imageCounter + 1) % imageCache.length;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
},
2000);
}
Thank you so much for your help!!!!!
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<ul id="image_list">
<li>
<a href="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?h=350&auto=compress&cs=tinysrgb" title="Casting on the Upper Kings"></a>
</li>
<li>
<a href="https://images.pexels.com/photos/34950/pexels-photo.jpg?h=350&auto=compress&cs=tinysrgb" title="Casting on the Lower Kings"></a>
</li>
<li>
<a href="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?h=350&auto=compress&cs=tinysrgb" title="Catch and Release on the Big Horn"></a>
</li>
<li>
<a href="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?h=350&auto=compress&cs=tinysrgb" title="Catching on the South Fork"></a>
</li>
<li>
<a href="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?h=350&auto=compress&cs=tinysrgb" title="The Lures for Catching"></a>
</li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p>
<img src="images/casting1.jpg" alt="" id="image">
</p>
<input type="button" value="Previous" name="previous" id="previous">
<input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>
<style type="text/css">
________________
/* type selectors */
article,
aside,
figure,
figcaption,
footer,
header,
nav,
section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 380px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1,
h2,
ul,
p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
ul {
display: none;
}
img {
height: 250px;
}
</style>
<script type="text/javascript">
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var listNode = $("image_list"); var captionNode = $("caption"); var imageNode = $("image");
var links = listNode.getElementsByTagName("a"); // Process image links
var i, linkNode, image; var imageCache = [];
for (i = 0; i < links.length; i++) {
linkNode = links[i]; // Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href"); image.title = linkNode.getAttribute("title"); imageCache.push(image);
} // Start slide show
var imageCounter = 0;
function loadImg() {
imageCounter = (imageCounter + 1) % imageCache.length;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
var timer = setInterval(function () {
loadImg();
}, 2000);
$("previous").addEventListener("click", function () {
imageCounter = (imageCounter - 2) % imageCache.length;
if(imageCounter<=0)
imageCounter = imageCache.length-imageCounter-2;
loadImg();
})
$("next").addEventListener("click", function () {
loadImg();
})
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.