Creating a Slide Show - Exercise

Contact Us or call 1-877-932-8228
Creating a Slide Show - Exercise

Creating a Slide Show

Duration: 20 to 30 minutes.

In this exercise, you will practice working with images by creating a slide show.

  1. Open ImagesWindowsTimers/Exercises/SlideShow.html for editing.
  2. Write code to preload Images/Banner.jpg, Images/Hulk.jpg, Images/Bruce.jpg, and Images/Batman.jpg. The paths to the images should be stored in an array called imagePaths. The Image objects should be stored in an array called imageCache.
  3. Create a function called changeSlide() that takes one parameter: dir, and behaves as follows:
    • If dir equals 1, it changes the slide to the next image as stored in the imagePaths array.
    • If dir equals -1, it changes the slide to the previous image as stored in the imagePaths array.
    • If the user is viewing the last slide and clicks the Next button, the first slide should appear.
    • If the user is viewing the first slide and clicks the Previous button, the last slide should appear.
  4. Test your solution in a browser.

Challenge

  1. Add a dropdown menu below the Previous and Next buttons that contains the names of the images without their extensions: "Banner", "Hulk", "Bruce" and "Batman".
  2. When the user selects an image from the dropdown, have that image appear above.
  3. When the user changes the image above using the Previous and Next buttons, have the dropdown menu keep in sync (i.e, show the name of the current image).

The solution should look like the screenshot below.

Solution:

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

<script type="text/javascript">
var imagePaths = [];
imagePaths[0] = "Images/Banner.jpg";
imagePaths[1] = "Images/Hulk.jpg";
imagePaths[2] = "Images/Bruce.jpg";
imagePaths[3] = "Images/Batman.jpg";

var imageCache = [];

for (var i=0; i<imagePaths.length; i++) {
	var s = imagePaths[i];
	imageCache[i] = new Image();
	imageCache[i].src = s;
}

var curSlide = 0;
function changeSlide(dir){
	curSlide += dir;
	if (curSlide < 0) {
		curSlide = imageCache.length - 1;
	} else if (curSlide >= imageCache.length) {
		curSlide = 0;
	}
	document.Slide.src = imagePaths[curSlide];
}
</script>
---- C O D E   O M I T T E D ----

Challenge Solution:

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

for (var i=0; i<imagePaths.length; i++) {
	var s = imagePaths[i]
	imageCache[i] = new Image();
	imageCache[i].src = s;
	imageCache[i].name = s.substring(s.lastIndexOf("/")+1, s.lastIndexOf("."));
}

var curSlide = 0;
function changeSlide(dir){
	curSlide += dir;
	if (curSlide < 0) {
		curSlide = imageCache.length - 1;
	} else if (curSlide >= imageCache.length) {
		curSlide = 0;
	}
	document.Slide.src = imagePaths[curSlide];
	document.forms[0].imageSelector.selectedIndex=curSlide;
}

function goToSlide(slide){
	document.Slide.src = imagePaths[slide];
	curSlide = slide;
}
</script>
---- C O D E   O M I T T E D ----

<input type="button" onclick="changeSlide(1);" value="Next"><br>
<select name="imageSelector" onchange="goToSlide(this.selectedIndex);">
<script type="text/javascript">
for (var i=0; i<imageCache.length; i++) {
	document.write("<option value='" + i + "'>"
					 + imageCache[i].name + "</option>");
}
</script>
</select>

---- C O D E   O M I T T E D ----
Next