Below is all the code needed for this simple picture animation.

In the head section of the document we first include the jquery code You will need to download this file, put it on your server and then change the src= part to point to your file

The next part, still in the head section, is the jquery code.
$(document).ready() as you can probably guess this function gets called after the DOM has loaded, and all it does in this case, is call my function, animate_banner();
$() is equivelant to jQuery() and the function creates a jQuery object. jQuery() is described here.

The animate_banner() function uses two jQuery functions, fadeIn and fadeOut.
The last picture that was displayed gets faded out
Then the next picture gets faded in
Once the fadeIn function is complete the counter variable gets changed and my function, animate_banner() gets called again.
The code uses the ids fade_image_1 to fade_image_5 to refer to the five pictures
In the body tag we can see that there are 5 img tags. Each img tag is given an id fade_image_1 to fade_image_5
Finally, it is important to note that the img tags are all given the class fade_image,
This class is defined at the end of the head section

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
var counter=1;
$(document).ready(function() {
// do stuff when DOM is ready
animate_banner();
});

function animate_banner()
{
if(counter==1)
{
counter=0;
$('#fade_image_5').fadeOut(6000);
$('#fade_image_1').fadeIn(6000, function () {counter=2;animate_banner();});
}
if(counter==2)
{
counter=0;
$('#fade_image_1').fadeOut(6000);
$('#fade_image_2').fadeIn(6000, function () {counter=3;animate_banner();});
}
if(counter==3)
{
counter=0;
$('#fade_image_2').fadeOut(6000);
$('#fade_image_3').fadeIn(6000, function () {counter=4;animate_banner();});
}
if(counter==4)
{
counter=0;
$('#fade_image_3').fadeOut(6000);
$('#fade_image_4').fadeIn(6000, function () {counter=5;animate_banner();});
}
if(counter==5)
{
counter=0;
$('#fade_image_4').fadeOut(6000);
$('#fade_image_5').fadeIn(6000, function () {counter=1;animate_banner();});
}
}
</script>

<style>
.fade_image
{
position:absolute;
display:none;
}
</style>

</head>
<body>
   <img id="fade_image_1" class="fade_image" src="images/ps3/1.jpg" />
   <img id="fade_image_2" class="fade_image" src="images/ps3/2.jpg" />
   <img id="fade_image_3" class="fade_image" src="images/ps3/3.jpg" />
   <img id="fade_image_4" class="fade_image" src="images/ps3/4.jpg" />
   <img id="fade_image_5" class="fade_image" src="images/ps3/5.jpg" />
</body>
</html>








  MylesWebDesign.co.uk   ©2010