Rotating Banner

dom.html

  <div id="splashcontent">
    <div class="rotate active">
      <h1>Tank Automation is NOT tank monitoring</h1>
      <p>If you want tank monitors, <a href="#">click here</a> for a list of venders.</p>
    </div>
    <div class="rotate">
      <h1>Tank Automation is NOT tank monitoring</h1>
      <p>If you want to revolutionize your fuel delivery business (and your profits) by tracking <strong>ALL</strong> of your tanks (not just some), learn more about EnerTrac Tank Automation below.</p>
    </div>
    <div class="rotate">
      <h1>Tank Automation is NOT tank monitoring</h1>
      <p><strong>EnerTrac Tank Automation</strong> - the next generation of fuel delivery optimization technology that will revolutionize your business.</p>
    </div>
    <div class="bannerControls"></div>
  </div>

rotatingBanner.js

$(document).ready( function () {
  resetControls();

  setInterval(function() {
    var rotate_selector = "#splashcontent .rotate";
    var currentActive = $('#splashcontent .active');

    currentActive.removeClass('active');

    if (currentActive.next(rotate_selector).length != 0) {
      currentActive.next(rotate_selector).addClass('active');
    }
    else {
      $(rotate_selector).first().addClass('active');
    }

    resetControls();
  }, 5000);


});

function resetControls() {
  $('.bannerControls').empty();
  $('#splashcontent .rotate').each( function(i) {
    if($(this).hasClass('active')) {
      $('.bannerControls').append('<img class="bannerButton" src="images/banner_circle_active.png" />');
    } else {
      $('.bannerControls').append('<img class="bannerButton" src="images/banner_circle.png" />');
    }
  });
  
  $('.bannerButton').click(buttonClicked);
}

function buttonClicked() {
  $('.active').removeClass('active');
  $('.rotate:eq('+$(this).index()+')').addClass('active');

  resetControls();
}

Style.css

#splashcontent {
  font-family: Arial, Helvetica, sans-serif;
  margin:0 0 0 4px;
  background-color:#fff;
  width:760px;
  position: relative;
  height:182px;
  background-image: url('images/banner_image.png');
}

.bannerControls {
  position: absolute;
  top: 165px;
  left: 20px;
}

.bannerControls .bannerButton {
  margin-right: 5px;
  cursor: pointer;
}

#splashcontent .rotate {
  display: none;
}

#splashcontent .active {
  display: block; !important;
}

#splashcontent p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px 330px 11px 12px;
  line-height: 21px;
  margin: 0px;
}

#splashcontent a {
  color: black;
}

#splashcontent a:hover {
  color: #555;
}

#splashcontent h1 {
  font-size: 21px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-style:italic;
  border-bottom: 0;
  padding: 26px 180px 11px 12px;
  margin: 0px;
  color: #127c33;
}

#splashcontent img { padding:0; }