Breaking Down the Slideshow

Breaking Down the Slideshow

One of the first things I learned as a web developer was how to add a slideshow to a webpage. I have used many over the years with fancy transition effects but it wasn’t until I decided to start building my own that I grasped the simplicity of the code. Here is a deconstructed slideshow with commented code. The slideshow is made up of SVG vector files. If you hover your cursor over the slideshow you will see that the images lose no resolution when sized up and handle transparency well. They are perfect for retinal display screens.

js

 

// This targets the element on the html page.
var myImage = document.getElementById("slideShow");

// This is the array of images.
var imageArray = ["images/svg/css3.svg","images/svg/git.svg",
"images/svg/html5.svg","images/svg/mysql.svg",
"images/svg/php.svg","images/svg/wordpress.svg",
"images/svg/js.svg"];
var imageIndex = 0;

// This increments the array index till it reaches the
//last image then resets to 0.
function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}

// This sets the time to elapse before replacing image
var intervalHandle = setInterval(changeImage,3000);

Submit a Comment

Your email address will not be published. Required fields are marked *