Images
Slide Show

Discussion

• Slide Show
  • Creating an online slide show requires that you change the images on a page.
  • Changing images requires either the use of a timer (setInterval) or a button to allow the user to change the image.
• setInterval() is a function attached to the window object.
  • W3Schools setInterval() definition.
  • The third argument is optional, the syntax for the setInterval function with the required arguments is:
    setInterval ( expression, interval );
    • The function setInterval tells you what to do (the expression) and how often to do it (the interval) in milliseconds.
    • The first argument triggers again and again according to the value in the second argument.
    • Here the timing is 2000 milliseconds, which is 2 seconds (unless download time takes longer).
  • Concert.html setInterval example
    • Click on ConcertAds1.html
    • Look at the slide show.
    • Right click on the page and View Source.
    • Resize the window of the source code to the right half of the screen.
    • Look at the body tag. The onload event handler starts the process by assigning a variable called run which will set to true or false depending if the setInterval is active.
    • run is created in the head so that it is recognized throughout the page and it makes it possible for you to code the interval to stop (clear).
• switch conditional statement
  • switch is a conditional statement that performs different code depending on the condition. It is sometimes called switch case.
• ConcertAds1.html switch example
  • There is another variable set outside of the function curImage. That is to initialize the variable that determines which image is shown first.
  • The function changeAd() assigns an image to the src attribute of the first image (only image) of the document. If a name had been assigned to the img tag, the name could have been used instead of image[0].
  • The switch condition compares the value of curImage to the value after the case label.
  • Control goes to the case label and executes all code until either the switch ends or a break statement is executed.
  • The first time the function is called, curImage is a l, so control goes to case 1.
  • The image is assigned to the src and the value of curImage is assigned a 2.

Practice

• Create a slide show using the setInterval() function and the switch statement.
  • Click on template
  • Right click and view source.
  • Save the source on your H drive.
  • Open your template in your LTS editor.
  • Save your page as slideShowSwitch.htm.
• Make any corrections for any page that does not validate or display correctly.

Update your page for any number of images

• Suppose you have a large slide show and you do not want to write a large switch statement.
• Click on ConcertAds2.html
• Look at the slide show.
• Right click on the page and View Source.
• Resize the window of the source code to the right half of the screen.
• The onload in the body tag is the same.
• The change of this page is in the function changeAd() and the addition of a new variable numberImages which is assigned the number of images in the slide show.
• As you enter the function changeAd() the first time, the value of curImage is 1 and the numberImages is 5.
• The first line of code
  curImage++;
  means add one to curImage.
• You can test the contents of a variable by using the selection if
  if(condition)
  {
  do something
  }
  When there is only one statement to be executed, the block curly braces are not needed.
• The next line uses the if to test to see if curImage is larger than numberImages
  when it is larger (and only when it is larger) the next line of code is executed.
  • curImage is restarted to 1 because you have displayed all of your images.
• The last line of code in the function assigns the src a new value, but that value is built each time you come through the code.
• The value is a string (which means text) using the "+" (concatenation operator).
• You can build a string that consists of the name of the image, concatenate the number of the image, and concatenate the extension. In this example all images must have the same extension.
• Since you want to restart the images after you display all of the images, you can test to see when you have displayed all of the images.
• Update your slide show for any number of images.

Clear Interval.

• The clearInterval() function will stop the setInterval.
  • Click on ConcertAds3.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • Remember the variable run contains true or false. Sending run to the clearInterval() function clears the interval by setting run to false.
  • Your screen still displays the last image displayed.
• Clear the Screen of the Image
  • Click on ConcertAds4.html
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • Change the value of the img src.
  • Change the value of the alt tag.
• User Control of the Slide Show
  • Click on ConcertAds5.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • The function changeAd() is the same as ConcertAds2.html where the images show using string concatenation, the modulus operator, and continually runs.
  • The changes are
    • The setInterval() is not called with the onload event handler in the body tag. It is called using a button.
    • The clearInterval() is also using a button.