image rotator

by tambascot

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript)</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type='text/javascript' src='js/infinite-rotator.js'></script>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  </head>
  <body>
    <h1>Infinite Rotating Images Using jQuery (JavaScript)</h1>
    <!-- START: Rotating Images -->
    <div id="rotating-item-wrapper">
      <img src="https://lh3.googleusercontent.com/l6nAgVwzrQuETWWLNB6fF917H3LkFoP6PyCD-LATQ_r14ojNVsdRRMB4eLQAhvSOdg-rNEZ_-YSZNn65YqeVg_7OBAZxsW6E5YwzXIOaXMY92lcKcZDyTJcCKkUWlQfYY-i0YnHyy-q0WIJp6F6Z3lubLalh0T4GQl3odFDDwT2oftU-HdpdKw3DYKCT74Sv2L-Oa0-W2YBP-NFegKv8L0m_RUyB2j-5XVBvuuKbMLjcfLOSozNi-rbKrWvZ8lT5fR0vCzsbpcgpOd5XWE_r_CT9CBnK6eZrSty_aDjDtUampjxB0g24wBEaL1SLoWpNBgMzK8YcNktx1VukDb-8AADhPjHJW7rZf4bwLqF80S4D23ab286MWKaIzxfjdQSPccvIwZHhxb-hLaSCyr940od6indAbmjjRnr2Y4XIIM8Wb_4TSCoYjltZOua2cksPgm-VoziXR5MSD0eY59QHDlfloHkYO_UYSfzwB_5InRt6udJAEGc3XcdVyyoopnSTdBODnKZEqp52FP0YoqQcq3W2W30lFaMc9kbZ67nRrWxxQTMYhAID6FdbD9ZR1SGoGKOLQU0V5AvjtqbYHcGRlDTMlBj0pvLAGAPAe5b3xJeQStyTQNpgty9Zz_tiXkHKKp-G4igv_G44zcadNqwfZOOd7B7MmhGel_jGf9eHQ2M=w441-h613-no" alt="a person entering a building" class="rotating-item" width="400" height="267" />
      <img...

CSS

#rotating-item-wrapper {
	position: relative;
  width: 400px;
  height: 267px;
	// width: 980px;
	// height: 347px;
}
.rotating-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

JavaScript

// Copyright (c) 2010 TrendMedia Technologies, Inc., Brian McNitt. 
// All rights reserved.
//
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************

$(window).load(function() {	//start after HTML, images have loaded

	var InfiniteRotator = 
	{
		init: function()
		{
			//initial fade-in time (in milliseconds)
			var initialFadeIn = 1000;
			
			//interval between items (in milliseconds)
			var itemInterval = 5000;
			
			//cross-fade time (in milliseconds)
			var fadeTime = 2500;
			
			//count number of items
			var numberOfItems = $('.rotating-item').length;

			//set current item
			var currentItem = 0;

			//show first item
			$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

			//loop through the items		
			var infiniteLoop = setInterval(function(){
				$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

				if(currentItem == numberOfItems -1){
					currentItem = 0;
				}else{
					currentItem++;
				}
				$('.rotating-item').eq(currentItem).fadeIn(fadeTime);

			}, itemInterval);	
		}	
	};

	InfiniteRotator.init();
	
});