jQuery: Making a slideshow
To begin you need to download two files:
jquery.js
jcycle.js
Once you have the files, you must place the following lines of code inside the tag <head>
<script language="JavaScript" src="path/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="path/jcycle.js" type="text/javascript"></script>
To create the SlideShow we must create the following code, indicating the images we use, this code must be inside the tag <body>
Code Sample:
<div id="slideShow">
<img src="path/img1.jpg" alt="Image 1" />
<img src="path/img2.jpg" alt="Image 2" />
<img src="path/img3.jpg" alt="Image 3" />
</div/>
Also in the tag <body> we put the code of the animation.
Example of animation with FADE transition:
<script language="JavaScript" type="text/javascript">
$(function() {
$('#slideShow').cycle({fx:'fade',
sync: 0
});
});
</script>
We can use the following types of transition: fade, zoom, scrollDown ou shuffle. You can check the four types of transition by clicking Here.
Some HTML 5 Tags
<video>
New html tag that lets you view streaming videos on your browser. You can also place text between the start and end for the older browser. Example:
<video src="name.ogg"
controls="controls">
</video>
<audio>
New html tag that lets you listen to music in your browser. You can also place text between the start and end for the older browser. Example:
<audio src="name.ogg"
controls="controls">
</audio>
<details>
Tag used to describe details of a document or document part. Example:
<details>This document was written in 2010.</details>