How to make image slide show from javascript
In this javascript article you will see how to make a simple and light weightage ( with no extra plugins required ) image slide show from JavaScript.
some of the time we need to do such task like moving images / banners in html pages or an .aspx page then we think about flash / jquery plugins to do that task but for flash, flash plugin must be install in client browser and jquery you you have to add some jquery ui and plugins which make page heavy, so we need an alternative solution of flash to move image just like flash, so here is the solution for making image slide solution through javascript, Just add your image in picture array and add function to body onload.
//***Add Your Image Here To Make Slide Show)**
Picture[1] = 'Image/laptop1';
Picture[2] = 'Image/laptop2';
Picture[3] = 'Image/laptop3';
Picture[4] = 'Image/laptop2;
Picture[5] = 'Image/laptop5';
Picture[6] = 'Image/laptop6';
Picture[7] = 'Image/laptop7';
var tss;
var iss;
var jss = pickRandom(Picture.length - 1);
var pss = Picture.length - 1;
//alert(jss);
var preLoad = new Array();
for (iss = 1; iss < pss + 1; iss++) {
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];
}
function runSlideShow() {
if (document.all) {
document.images.LogoBox.style.filter = "blendTrans(duration=2)";
document.images.LogoBox.style.filter = "blendTrans(duration=CrossFadeDuration)";
document.images.LogoBox.filters.blendTrans.Apply();
}
document.images.LogoBox.src = preLoad[jss].src;
//if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.LogoBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss = 1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
function pickRandom(range) {
if (Math.random)
return (Math.round(Math.random() * range) + 1);
else {
return 1;
}
}
</script>
</head>
<body onload="setTimeout('runSlideShow()', 1001);">
<!-- Client Name of ImageControl must be 'LogoBox'-->
<img name="LogoBox" border="0" src="design/space.gif" width="140" >
</body>
</html>
<html>
<head>
<script type="text/javascript">
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 1000;
var CrossFadeDuration = 2;
var Picture = new Array(); // don't change this
<head>
<script type="text/javascript">
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 1000;
var CrossFadeDuration = 2;
var Picture = new Array(); // don't change this
//***Add Your Image Here To Make Slide Show)**
Picture[1] = 'Image/laptop1';
Picture[2] = 'Image/laptop2';
Picture[3] = 'Image/laptop3';
Picture[4] = 'Image/laptop2;
Picture[5] = 'Image/laptop5';
Picture[6] = 'Image/laptop6';
Picture[7] = 'Image/laptop7';
var tss;
var iss;
var jss = pickRandom(Picture.length - 1);
var pss = Picture.length - 1;
//alert(jss);
var preLoad = new Array();
for (iss = 1; iss < pss + 1; iss++) {
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];
}
function runSlideShow() {
if (document.all) {
document.images.LogoBox.style.filter = "blendTrans(duration=2)";
document.images.LogoBox.style.filter = "blendTrans(duration=CrossFadeDuration)";
document.images.LogoBox.filters.blendTrans.Apply();
}
document.images.LogoBox.src = preLoad[jss].src;
//if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.LogoBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss = 1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
function pickRandom(range) {
if (Math.random)
return (Math.round(Math.random() * range) + 1);
else {
return 1;
}
}
</script>
</head>
<body onload="setTimeout('runSlideShow()', 1001);">
<!-- Client Name of ImageControl must be 'LogoBox'-->
<img name="LogoBox" border="0" src="design/space.gif" width="140" >
</body>
</html>
OutPut Of Code
![]()
