Jquery: simple image changer

<script type="text/javascript">
  function swapImages(){
    var $active = $('#images .active');
    var $next = ($('#images .active').next().length > 0) ? $('#images .active').next() : $('#images img:first');
    $active.fadeOut(function() {
      $active.removeClass('active');
      $active.addClass('inactive');
      $next.fadeIn().addClass('active');
    });
  }
 
  // Run our swapImages() function every 8 secs
  setInterval('swapImages()', 8000);
</script>
.active {
  display: block;
}
 
.inactive {
  display: none;
}
<div id="images">
  <img class="active" src="http://www.domain.com/image1.jpg">
  <img class="inactive" src="http://www.domain.com/image2.jpg">
  <img class="inactive" src="http://www.domain.com/image3.jpg">
</div>

Leave a Reply