ZuoTi.Pro
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...

  • 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>...

  • 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...

  • Javascript + HTML, no JQuery please. So, Im trying to figure out how to send an...

    Javascript + HTML, no JQuery please. So, Im trying to figure out how to send an alert if the value of my selection is "0". I will be using this for a validation form assignement. So if the user leaves the selection on the default "0" value I can prompt the user to pick a valid option which would be 1+. Not sure how to access this value. Example code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Form Validation</title>...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

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
ADVERTISEMENT