Cycling images

Objectives

  • Use timers in JavaScript
  • Change an image source using JavaScript

Overview

The purpose of this assignment is to use JavaScript to create a banner of cyclying images.

Example

Cycling images assignment image
Example of cycling images assignment - the actual solution would have the first image changing once per second, the second image changing once every half second and the third image changing once every third second.

Program Specifications

  • This assignment should include separate CSS and JavaScript files.
  • Make sure the HTML, CSS, and JavaScript files all have documentation comments.
  • Create a web page with a heading and three images centered across the top of the page.
  • There should be at least four different images displayed in the cycling rotation. You can use the same set of four or more images for each of the cycling img elements.
  • Use JavaScript to set up a timer to change the first image every second. Feel free to use the example pet image thumbnails used as a resource for this course.
  • Use JavaScript to set up a timer to change the second image every half second.
  • Use JavaScript to set up a timer to change the third image every third second.
  • Use JavaScript to set up onclick handlers so that the full size image of the thumnail becomes the content of the web page.

Notes:

  • One good approach to this problem is to set up a timer that fires every sixth of a second. Then you can use that to change the first image every sixth time it fires, the second image every third time it fires, and the third image every second time it fires.
  • A math operation that could be very useful for this is the modulus (remainder) operator, which is the % symbol. It is used like division, but it returns the remainder of the division insted of the quotient. Example: 17 % 3 returns 2. The quotient would be 5 because 3 goes into 17 a total of 5 times. The remainder is 2.

Grading rubric

  • 5 pts: There are separate HTML, CSS, and JavaScript files that work together properly.
  • 5 pts: All of the files have complete documentation comments and follow common coding conventions.
  • 5 pts: The HTML file doesn't contain any styling or JavaScript.
  • 5 pts: CSS is properly used to style the page to look similar to the example given.
  • 5 pts: The JavaScript code implements the requirements of the assignment without errors.
  • 10 pts: The images cycle correctly and smoothly at the proper speeds.
  • 5 pts: The web page content is changed to the full-size image when a thumbnail is clicked on.