Carousel Slideshow- Charles Dickstein
by hlmurray91
HTML
<div id="js-slideshow">
<img id="img1" src="http://placehold.it/350x150.png&text=1">
<img id= "img2" src="http://placehold.it/350x150.png&text=2">
<img id="img3" src="http://placehold.it/350x150.png&text=3">
<img id="img4" src="http://placehold.it/350x150.png&text=4">
</div>
CSS
img{
display: none;
}
JavaScript
/**
* Exercise:
* Show only one image at a time and every
* 2.5 seconds show the next image. When the
* image list is exhausted, loop around to
* the first.
*/
//* unction cycleImages(){
// var slideShowDiv = document.getElementById("js-slideshow");
//} */
function main(){
var imgNum = 1;
var prevImgNum = 1;
setInterval(function(){
var getImg = document.getElementById("img"+imgNum);
getImg.style.display = "block";
var getPrevImg = document.getElementById("img"+prevImgNum);
getPrevImg.style.display = "none";
prevImgNum = imgNum;
if (imgNum < 4){
imgNum++;
}
else{
imgNum = 1;
}
}, 2500);
}
main();