[an error occurred while processing this directive]

jQuery to Image Changes With Sliding Effect

                         

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

Steps to develop the program

 Step 1:

 

 

 

 

Create a new file (imageSlider.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#imageSlider').innerfade({
	animationtype: 'slide',
	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="imageSlider" type="none">					
      <li><img src="images/w1.jpg" alt="Image1" />
      </li>
      <li><img src="images/w2.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#imageSlider').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.

                         

[an error occurred while processing this directive]