1 Banner HTML Example

Code (HTML)

<div id="rotator" class="loading">
  <div class="slide"><img src="../images/300/1.jpg" alt="" /></div>
</div>

Code (CSS)

/* default rotator styles */
#rotator { position: relative; width: 980px; height: 360px; overflow: hidden; background-color: white; margin: 0px; padding: 0px }
#rotator .slide { width: 980px; height: 360px; position: absolute; top: 0px; left: 0px; overflow: hidden; background: white; display: none; margin: 0px; padding: 0px }

/* default rotator nav styles */
#rotator-nav { display: block; position: absolute; bottom: 10px; right: 10px; z-index: 5000; background: white; opacity: .5; filter: alpha(opacity=40); padding: 4px; -moz-border-radius: 4px }
#rotator-nav:hover { opacity: 1; filter: alpha(opacity=100) }
#rotator-nav li { display: block; float: left; padding: 0px 2px }
#rotator-nav a { border: solid 1px #aaa; color: #aaa; font: normal 12px Arial; padding: 2px 3px; text-decoration: none; -moz-border-radius: 2px; outline: none }
#rotator-nav a:hover, #rotator-nav .current a { color: #0063B1; border-color: #0063B1 }
.loading { background: url(../images/ui/loading.gif) 50% 50% no-repeat }

Code (JS)

jQuery(function ($) {
	var rotator = $('#rotator').rotator({ autostart: true });
});