Да се въртят картинки през 10 секунди

[sianbg_s]

Трябва ми скрипт 4 картинки да се сменят през 10 секунди в един div. Ако може да има и някакви ефекти.

 

[LuBaTa]

В style.css Добавяш:

/* Rotating Images */
#rotating-item-wrapper {
	position: relative;
	width: 710px;
	height: 300px;
	margin: -10px 0px 0px -5px;
	box-shadow: 0px 5px 13px #999;
}
.rotating-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
/* End of Rotating Images */

правиш нов файл "infinite-rotator.js" и във него:

// 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 = 10000;
			
			//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();
	
});

А за изкарване:

 <link href="style.css" rel="stylesheet" type="text/css" />
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>    
 <script type='text/javascript' src='infinite-rotator.js'></script>
 <div id="rotating-item-wrapper">
      <img src="images/1.gif" alt="" class="rotating-item"  />
      <img src="images/2.gif" alt="" class="rotating-item"  />
      <img src="images/3.gif" alt="3" class="rotating-item" />
      <img src="images/4.gif" alt="4" class="rotating-item" />
    </div>

 

[sianbg_s]

Перфектен е