|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
