JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1325 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x0090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Multiple Slide Shows

This is an example of multiple slide shows cycling through a set of photos with


Scripts needed (copy and paste inside <head>)

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="path_to_javascript_file.js"></script><!--adjust this as needed-->


Here's the html code

You'll have to obviously change the filepaths in the code below to match the real path to your images

<div class="slideShowBox" id="slideShowBox1">
<img src="images/s1/1.png"/>
<img src="images/s1/2.png"/>
<img src="images/s1/3.png"/>
<img src="images/s1/4.png"/>
<img src="images/s1/5.png"/>
<div class="slideShowBox" id="slideShowBox2">
<img src="images/s2/1.png"/>
<img src="images/s2/2.png"/>
<img src="images/s2/3.png"/>
<img src="images/s2/4.png"/>
<img src="images/s2/5.png"/>
<div class="slideShowBox" id="slideShowBox3">
<img src="images/s3/1.png"/>
<img src="images/s3/2.png"/>
<img src="images/s3/3.png"/>
<img src="images/s3/4.png"/>
<img src="images/s3/5.png"/>
<div class="slideShowBox" id="slideShowBox4">
<img src="images/s4/1.png"/>
<img src="images/s4/2.png"/>
<img src="images/s4/3.png"/>
<img src="images/s4/4.png"/>
<img src="images/s4/5.png"/>


Here's the CSS

You'll have to change the actual width and height values below to match your design

.slideShowBox {
.slideShowBox img {
#slideShowBox1, #slideShowBox1 img {
#slideShowBox2, #slideShowBox2 img {
#slideShowBox3, #slideShowBox3 img {
#slideShowBox4, #slideShowBox4 img {


Here's the javascript code

Multiple 5 photo slide shows
Written by Leo Florendo
Freestyle Academy 2013
This code is for 5 photo slide shows that cycle through in order.
It can be used for multiple instances of the slideshow with different photos in a single page.
A div with class of slideShowBox must contain 5 images
//Resets the order of each image in the same order of insertion
function setZIndex(){
$(".slideShowBox img:nth-child(1)").css({"z-index":"5"});
$(".slideShowBox img:nth-child(2)").css({"z-index":"4"});
$(".slideShowBox img:nth-child(3)").css({"z-index":"3"});
$(".slideShowBox img:nth-child(4)").css({"z-index":"2"});
$(".slideShowBox img:nth-child(5)").css({"z-index":"1"});
//set initial variables
var fadeTime=250, durationTime = 4000, delayTime = durationTime - fadeTime;
//Copy, paste and adjust each line below for every slideshow animation
//The blue text is the id of the div that contains the images and that div MUST have a class of slideShowBox
//The red number is the delay time to start the fading of photos for that particular slideshow
var startTimer1 = setTimeout(function(){slideShow("#slideShowBox1")},0);
var startTimer2 = setTimeout(function(){slideShow("#slideShowBox2")},1000);
var startTimer3 = setTimeout(function(){slideShow("#slideShowBox3")},2000);
var startTimer4 = setTimeout(function(){slideShow("#slideShowBox4")},3000);
function slideShow(targetDiv){
window.clearTimeout(startTimer1, startTimer2, startTimer3, startTimer4);//add in every startTimer you have above
//Don't change anything below!!!!!!
var targetImg;
targetImg = targetDiv + " img:nth-child(1)";
$(targetImg).delay(delayTime).animate({//fades out 1st image
},fadeTime, function(){//executes when 1st image fade out is complete
targetImg = targetDiv + " img:nth-child(2)";
$(targetImg).delay(delayTime).animate({//fades out 2nd image
},fadeTime, function(){//executes when 2nd image fade out is complete
targetImg = targetDiv + " img:nth-child(3)";
},fadeTime, function(){
targetImg = targetDiv + " img:nth-child(4)";
},fadeTime, function(){
targetImg = targetDiv + " img:nth-child(1)";
},fadeTime,function (){//executes when 1st image fade IN is complete
targetImg = targetDiv + " img";
$(targetImg).css({//makes ALL images visible and ready to fade out again
slideShow(targetDiv);//restarts the sequence again for the same targetDiv