Simple jQuery Content Rotator
jQuery to the rescue, again, to make my javascript coding life easy. What I needed was a simple text rotator. I went looking for some good examples of jQuery rotators and found a ton of great examples. Who knew it would be this easy?
JAVASCRIPT
$(document).ready(function() {
contentRotator($("ul#banner > li:first"));
});
var doAnimate = true;
function contentRotator(content) {
if (doAnimate) {
content.fadeOut("fast", function(content) {
return function() {
/* HIDE ALL ITEMS */
$("ul#banner > li").hide();
content.fadeIn(2500, function() {
/* GO BACK TO FIRST ITEM */
if ($(this).attr("id") == $("ul#banner > li:last").attr("id")) {
setTimeout(function() {
contentRotator($("ul#banner > li:first"));
}, 5000);
}
else { /* FADE IN NEXT ITEM */
setTimeout(function() {
contentRotator($(content.next()));
}, 5000);
}
});
};
} (content));
}
}
CSS
.bannertext {
font: 48px "Century Gothic", Helvetica, Arial, san-serif;
color: #ffffff;
line-height: 48px;
text-transform: uppercase;
position: absolute;
}
#banner{
list-style-image: none;
list-style-type: none;
}
#banner li{
display: none;
}
HTML
<div id="homebanner">
<ul id="banner">
<li id="statementOne"><strong>Vision</strong> For The Future</li>
<li id="statementTwo"><strong>Safety</strong></li>
<li id="statementThree">A <strong>Great</strong> Place To Work</li>
</ul>
</div>
Output
Credit to http://www.clecompte.com/building-simple-jquery-rotating-carousel/ for lending me the ideas to start.