|
jQuery - Rotating through html elements (like an image slide show)
|
|
| |
Rating: 2 user(s) have rated this article
5.0 out of 5 stars
Posted by: jstrosch01,
on 6/30/2010,
in category "jQuery"
Views: this article has been read 216 times
Let's jump right into the code, here's the javascript we'll be using (see the comments in the code for a description of the script):
|
< script type="text/javascript">
var cnter = 1;
this.rotateElements = function(){
// define the pause for each property (in milliseconds)
var pause = 10000;
// get a count of each < li> item to loop through
var length = $("#ulFeatured li").length;
var temp = -1;
this.show = function(){
// restart the loop
if(cnter > length)
cnter = 1;
ran = cnter;
$("#ulFeatured li").hide(); // hide the current item
// now show the next, speed in ms
$("#ulFeatured li:nth-child(" + ran + ")").fadeIn(1500);
cnter++;
};
show();
// if there is only one item then don't start the rotation
if(length > 1)
setInterval(show,pause);
};
// And this kicks off the 'show', will run after the DOM is loaded
$(document).ready(function(){
rotateElements();
});
< /script>
|
And here is our target html:
|
< ul id="ulFeatured">
< li>
< div style="height:200px;width:100px;background-color:red;">< /div>
< /li>
< li>
< div style="height:200px;width:100px;background-color:red;">< /div>
< /li>
< li>
< div style="height:200px;width:100px;background-color:red;">< /div>
< /li>
< /li>
And Some CSS:
< style type="text/css">
ul#ulFeatured
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#ulFeatured li
{
display: none;
}
< /style>
|
Here's a simple example of this script. Of course the html in each list item can get much more robust, this just gives you an idea of how you can leverage jQuery to rotate through html elements that are not image based.
Example:
Reference:
http://cssglobe.com/post/6023/simple-way-to-random-display-or-rotate-content-using