This is one of the simple way to display the slideshow to your home page, This is very basic slideshow with fading effect.
I get the images using array, we can add more images using array Now i am currently used 4 images if you want you can add more images.
But this is very basic slideshow effect.
index.php:
<html>
<head>
<script type=”text/javascript” src=”slideshowfade.js”></script>
<style>
#Slideshow1 img { width:700px; }
</style>
</head>
<body>
<script>
var imgArray = new Array();
imgArray[0] = “fading effect.jpg”;
imgArray[1] = “fading effect1.jpg”;
imgArray[2] = “fading effect2.jpg”;
imgArray[3] = “fading effect3.jpg”;
slideshowFade(‘Slideshow1’,”,imgArray,20,5000);
</script>
</body>
</html>
slideshowfade.js
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer = new Array();
var slideshowFadeCount = new Array();
var slideshowFadeImages = new Array();
function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
if(cl)
cl = ‘ class=”‘+cl+'”‘;
document.write(‘<div id=”‘+id+'”‘+cl+’><img id=”‘+id+’img” onload=”slideshowFadeRun(”+id+”)”/></div>’);
var ss = document.getElementById(id+’img’);
if(ss.addEventListener)
{
ss.addEventListener(‘mouseover’,function(){slideshowFadeMouseover(id)},false);
ss.addEventListener(‘mouseout’,function(){slideshowFadeMouseout(id)},false);
}
else if(ss.attachEvent)
{
ss.attachEvent(‘onmouseover’,function(){slideshowFadeMouseover(id)});
ss.attachEvent(‘onmouseout’,function(){slideshowFadeMouseout(id)},false);
}
slideshowFadeCount[id] = 0;
slideshowFadeImages[id] = imageArray;
slideshowFadeAnimate[id] = ‘run’;
slideshowFadeTimer[id] = setInterval(‘slideshowFadeAnimation(”+id+”,”+holdTime+”);’,fadeInterval);
}
function slideshowFadeAnimation(id,holdTime)
{
if(slideshowFadeAnimate[id]==’run’)
{
var obj = document.getElementById(id+’img’);
var opa = slideshowFadeCount[id]%200;
if(opa==0)
{
slideshowFadeAnimate[id] = ‘load’;
obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
}
else if(opa==100)
{
slideshowFadeAnimate[id] = ‘hold’;
setTimeout(‘slideshowFadeRun(”+id+”)’,holdTime);
}
else if(opa>100)
opa = 200-opa;
obj.style.opacity = (opa/100).toString();
obj.style.filter = “alpha(opacity=”+opa.toString()+”)”;
slideshowFadeCount[id]++;
if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
slideshowFadeCount[id]=0;
}
}
function slideshowFadeMouseout(id)
{
if(slideshowFadeAnimate[id]==’mouseover’)
slideshowFadeAnimate[id] = ‘run’;
}
function slideshowFadeMouseover(id)
{
if(slideshowFadeAnimate[id]==’run’)
{
slideshowFadeAnimate[id] = ‘mouseover’;
var obj = document.getElementById(id+’img’);
obj.style.opacity = “1”;
obj.style.filter = “alpha(opacity=100)”;
slideshowFadeCount[id] = (Math.floor(slideshowFadeCount[id]/200)*200)+101;
}
}
function slideshowFadeRun(id)
{
slideshowFadeAnimate[id] = ‘run’;
}
