Now a days most of the websites or blogs are using image slideshow or animation on their pages using JavaScript codes. Such image animations make websites more attractive looking and smart. Here I have placed codes for creating a simple JavaScript fade effect animation. It may help you a lot.
Code for Creating Simple JavaScript Fade Effect Animation
Just copy and paste the code below where you want to place slideshow and change the location of the images.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?
load=effects"></script>
<script type="text/javascript">
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:0, to:1.0});
}
function FadeEffect(element){
new Effect.Fade(element,
{duration:1, from:1.0, to:0});
}
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "/image_1.gif";
path[1] = "/image_2.gif";
path[2] = "/image_3.gif";
function swapImage_0()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("FadeEffect('hideshow')",4000);
setTimeout("ShowEffect('hideshow')",5000);
setTimeout("swapImage_0()",5000);
}
window.onload=swapImage_0;
</script>
<div id="hideshow">
<img height="200" name="slide" src="/image_1.gif" width="400" />
</div>
