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.