jQuery to Image Changes With Fading Effect

In this first jQuery tutorial we will develop a program that images Changes with fading effect.

jQuery to Image Changes With Fading Effect

     

In this first jQuery tutorial we will develop a  program that  images Changes with fading effect.

Steps to develop the program

 Step 1:

 

 

 

 

Create a new file (imagefade.html) and add the following code into

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="de" lang="de">

<head>
<title>Image Slider</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jqfade.js"></script>
<script type="text/javascript">
    $(document).ready(
        function(){
	    $('ul#imageFade').innerfade({
	    animationtype: 'fade',
       	    speed: 1000,
	    timeout: 5000,
            type: 'random',
            containerheight: '220px'
		});
		});
</script>

<style type="text/css" media="screen, projection">
@import url(style/fade.css);
</style>		
</head>
<body>				
     <ul id="imageFade" type="none">
       <li><img src="images/w3.jpg" alt="Image1" /></li>
       <li><img src="images/w4.jpg" alt="Image2" /></li>
       <li><img src="images/w3.jpg" alt="Image3" /></li>
       <li><img src="images/w4.jpg" alt="Image4" /></li>
		
				</ul>
				
					
	  	
	</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jqfade.js"></script>

 

Function is called 

$('ul#imageFade').innerfade

 When this function  having attributes 

animationtype: 'slide',
speed: 1000,
timeout: 5000,
type: 'random',
containerheight: '220px'

  

This set the animationType, speed,timeout and show thetype of data.

  

When you run the program in browser it will look like following screen shot:

 

After 1000 msec randomly show the next Image 

  

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Advertisements

Share on Google+Share on Google+

jQuery to Image Changes With Fading Effect

Posted on: September 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: jQuery to Image Changes With Fading Effect   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads