Popup Timed Slide Show - Exercise

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

Contact Us or call 1-877-932-8228
Popup Timed Slide Show - Exercise

Popup Timed Slide Show

Duration: 15 to 25 minutes.

In this exercise, you will create a popup slideshow that runs by itself.

  1. Open ImagesWindowsTimers/Exercises/Timed-SlideShow.html in your editor.
  2. Add code to the startShow() function to pop up popup-show.html in a new 200px by 300px window. Make sure it comes to the foreground.
  3. Open ImagesWindowsTimers/Exercises/popup-show.html in your editor.
  4. Notice the play() function is called when the window loads. Add code to the play() function so that it changes the slide every second (1000 milliseconds).
  5. Add code to the stop() function to stop the slideshow.

Solution:

ImagesWindowsTimers/Solutions/Timed-SlideShow.html
---- C O D E   O M I T T E D ----

<script>
var showWin;

function startShow() {
	showWin = window.open("popup-show.html","showWin","height=300,width=200,left=300,top=100");
	showWin.focus();
}
</script>
---- C O D E   O M I T T E D ----

Solution:

ImagesWindowsTimers/Solutions/popup-show.html
---- C O D E   O M I T T E D ----
var showInterval;
function play() {
	showInterval = setInterval(function() { changeSlide(1); },1000);
}

function stop() {
	clearInterval(showInterval);
}
</script>
---- C O D E   O M I T T E D ----

Next

This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.