HomeworkLib
Question

I am trying to create a slide show using JavaScript. This is what I have so...

I am trying to create a slide show using JavaScript. This is what I have so far:

HTML:

<!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>

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;
   document.getElementById("next").onclick = function ()
   {
       imageCounter = (imageCounter + 1) % imageCache.length;
       image = imageCache[imageCounter];
       imageNode.src = image.src;
       captionNode.firstChild.nodeValue = image.title;
   }
  
   document.getElementById("previous").onclick = function ()
   {
       imageCounter = (imageCounter - 1) % imageCache.length;
       image = imageCache[imageCounter];
       imageNode.src = image.src;
       captionNode.firstChild.nodeValue = image.title;
  
}

When I run the program, my next and previous buttons do not work when clicked. Please help me fix this problem.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Note :Here Images are used for demonstration purpose only.

Here a new web page with name "slideShow.html" is created, which contains following code.

slideShow.html :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<!--title for web page -->

<title>Slide Show</title>

<link rel="stylesheet" href="main.css">

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.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>

<!--link to external Javascript file -->

<script src="slide_show.js"></script>

</body>

</html>

*****************************

slideShow.js :

//function to getElementsById()

var $ = function (id) {

return document.getElementById(id);

}

//Window onload

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;

document.getElementById("next").onclick = function () {

imageCounter = (imageCounter + 1) % imageCache.length;

image = imageCache[imageCounter];

imageNode.src = image.src;

captionNode.firstChild.nodeValue = image.title;

}

document.getElementById("previous").onclick = function () {

//checking value of image counter,

//when page first loads and previous button is cliked then set the imagecounter value

if(imageCounter==0)

{

//set the value to array length that is imageCache

imageCounter=imageCache.length;

}

imageCounter = (imageCounter - 1) % imageCache.length;

image = imageCache[imageCounter];

imageNode.src = image.src;

captionNode.firstChild.nodeValue = image.title;

}

}

======================================================

Output : Open web page slideShow.html in the browser and will get the screens as shown below

Screen 1 :slideShow.html

Slide Show ← → C ⓘlocalhost:8080/slideshow.html it wont be easy but itll be worth it @cuteheadskids PreviouS NextScreen 2 :Screen when next button is clicked

DSlide Show C localhost:8080/slideShow.html Casting on the Lower Kings thera. them. 32Cs them.them. Jra NE to pursue them Sc

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
I am trying to create a slide show using JavaScript. This is what I have so...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() {    // get the image URL and caption for each...

    image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() {    // get the image URL and caption for each image    var imageURL = $(this).attr("href");    var caption = $(this).attr("title");       // preload the image for each link              var galleryImage = new Image();        galleryImage.src = imageURL;               // set up the event handlers for each link        $(this).click(function(evt) {            $("#image").attr("src", imageURL);        $("#caption").text(caption);              // cancel...

  • <!DOCTYPE HTML> <html lang="en"> <head>    <meta charset="utf-8"> <title>Plaid Scarf Selector</title>    <link rel="stylesheet" href="a3.css" />...

    <!DOCTYPE HTML> <html lang="en"> <head>    <meta charset="utf-8"> <title>Plaid Scarf Selector</title>    <link rel="stylesheet" href="a3.css" />    <script src="a3.js"> </script> </head> <body>    <section>        <h1> Plaid Scarf Selector </h1><br>        <p>Feels close to real cashmere (but costs a lot less).        Think of this scarf as the next best thing to wearing authentic cashmere.        Its microsueded fabric really is that soft. In fact, at first touch some        mistake if for the real...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • I am trying to make it so that radio buttons when clicked execute a javascript file....

    I am trying to make it so that radio buttons when clicked execute a javascript file. I have to to have the exercises in external files. Here is what I have so far. I am reusing a script that was used to make radio buttons switch CSS files so I think I have to change the set attribute options. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> 4.2 Output: The first 20 Fibonacci numbers, which are...

  • Slide show application with effects and animations for a travel agency (max. 100%) Sunshine Beach travel...

    Slide show application with effects and animations for a travel agency (max. 100%) Sunshine Beach travel agency needs to make their website more attractive and interactive by implementing some effects and animations. The requirements are: Using the images provided by the agency create a slide show. The slide show should show the slides by fading In and hide by fading out. At the same time, the caption of the slide should appear with animation of the font size, left property...

  • This question relates to JavaScript. Could you please show me how to get my code below...

    This question relates to JavaScript. Could you please show me how to get my code below working. Please keep it simple. The code has a green square image.  When it is clicked the function generates a random number from 1-3. If the number generated is '1' then the green square is replaced by a picture of a tree. Please keep it as simple as possible because I am new to coding. Thanks. <html> <head>              <title></title>        <script>...

  • I am working on a normal javascript program where i have to take two names and...

    I am working on a normal javascript program where i have to take two names and put them in array and print out in sorted order.But,when the user clicks the print button it should show the output,but if user clicks second time,it should start again(basically reload the page).I have done the part about userinput and sorting and printing,but couldn't get the function of when user clicks button second time. <!DOCTYPE html> <html> <body> <input type="text" id="Name1" value=""><br> <input type="text" id="Name2"...

  • This question relates to Javascript. Could you please show me why my code is not working?...

    This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head>               <title></title>        <script>...

  • This question relates to Javascript. Could you please show me why my code is not working?...

    This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head>               <title></title>        <script>...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT