Home
>
CSS,
HTML,
JavaScript > Creating an Image SlideShow Using Javascript
Creating an Image SlideShow Using Javascript
In this article, we will create an image slideshow including a lot of effects. We will use HTML and JAVASCRIPT. We have three files (functions.js, slideshow.html and style.css).
Application 1.0 (Creating an Image Slide Show with Javascript)
functions.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| var i=1;
var r=0; //This variable contains the number of loaded images.
var address='images/';
function ChangeImage(){
var ourimage=document.getElementById("slideImg");
if (document.all && ourimage.filters){
ourimage.filters.revealTrans.Transition=Math.floor(Math.random()*23);
ourimage.filters.revealTrans.stop();
ourimage.filters.revealTrans.apply();
ourimage.filters.revealTrans.play();
}
if(i>3){ // Number of our images is 4.
i=0;
}
i++;
document.getElementById("slideImg").src = address + 'slideimage-' + i + '.jpg';
}
function SetIt(){
setTimeout("ChangeImage()",4000); // ChangeImage() function is executed each 4 seconds.
}
function startSlide() {
r++;
if(r==3){// If r reaches 3 (if third image was loaded) then show the first image and set the timer for starting the slideshow with SetIt() function.
document.getElementById("slideDiv").innerHTML='';
document.getElementById("slideDiv").innerHTML='<img id="slideImg" src="' + address + '/slideimage-1.jpg" width="370" height="200" border="0" style="filter:revealTrans(duration=1,transition=12)" onload="SetIt();" />';
}
} |
style.css:
1
2
| #slidecontainer {background-color:#E2DDC9; border:1px solid #8f8f84; padding:10px; width:370px; height:200px; text-align:center;}
#slideDiv {width:370px; height:200px; float:left;} |
slideShow.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<title>Creating an Image SlideShow with Javascript by Memiso.com</title>
<script type="text/javascript" src="functions.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="cacheDiv" style="display:none;">
<img src="images/slideimage-1.jpg" width="1" height="1" onload="startSlide();">
<img src="images/slideimage-2.jpg" width="1" height="1" onload="startSlide();">
<img src="images/slideimage-3.jpg" width="1" height="1" onload="startSlide();">
<img src="images/slideimage-4.jpg" width="1" height="1">
</div>
<div id="slidecontainer">
<div id="slideDiv"></div>
</div>
</body>
</html> |
You may be think that what is the cacheDiv used for. It’s used to hide the loaded images until third image was loaded. If our visitors’ connection speeds aren’t fast enough (or we have too many images), this method will be useful for us.
Output of Application 1.1:
Note: The effects appears only on Internet Explorer.
Download This Application:
We hope you will find this article useful…
JavascriptImageSlideShow.rar (117 kilobyte)
Note: The effects appears only on Internet Explorer.
Are you saying this will only work when someone views via Internet Explorer and will not work in other browsers (e.g., Firefox, et al.)?
Sincerely,
Ron
Yes Ron, because we used revealTrans filter and it is working only on internet explorer. You cannot see transition effects with other browsers. However, in this article, the important point is not the transition effects! We tried to show how to make a slide show. Giving transition effects to our slideshow is another issue and we are going to give a solution for that too;)