Автоматично сменяне на картинки в слайд-шоуто

[ronaldinho_880]

Някаква идея как да го направя ? Гледах на няколко места, но така и не намерих решение. Да се сменят картинките през 5 секунди. Благодаря!

 

[chebaev]

Виж тук - http://simplythebest.net/scripts/cat/110/Image-rotation.html

 

[shterev]

ето един код, който съм писал мн на бързо:

[js]if($('#carousel').length != 0){
$('#carousel ul li').not('.selected').hide();
function move(){
var selected = $('#carousel ul li.selected'),
current = ( selected.next('li').length == 0) ? $('#carousel ul').find('li:first-child') : selected.next('li') ;

selected.removeClass('selected').fadeOut();
current.addClass('selected').fadeIn();;
}
setInterval(function(){ move()},5000);
}




[/js]

<div id="carousel">
		<ul>
			<li class="" style="display: none;">
				<div>
					<h2>zarges</h2>
					<h3>
						Aluminiumkasser av 
						meget god kvalitet
					</h3>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				</div>
				<img src="images/temp/demo-01.png" alt="">
				<a href="#">les mer</a>
			</li>
			<li style="display: none;" class="">
				<div>
					<h2>zarges 2</h2>
					<h3>
						Aluminiumkasser av 
						meget god kvalitet
					</h3>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				</div>
				<img src="images/temp/demo-01.png" alt="">
				<a href="#">les mer</a>
			</li>
			<li style="display: none;" class="">
				<div>
					<h2>zarges 3</h2>
					<h3>
						Aluminiumkasser av 
						meget god kvalitet
					</h3>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				</div>
				<img src="images/temp/demo-01.png" alt="">
				<a href="#">les mer</a>
			</li>
			<li style="display: list-item;" class="selected">
				<div>
					<h2>zarges 4</h2>
					<h3>
						Aluminiumkasser av 
						meget god kvalitet
					</h3>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				</div>
				<img src="images/temp/demo-01.png" alt="">
				<a href="#">les mer</a>
			</li>
			
		</ul>
	</div>

[css]
#carousel{
position:relative;
width:700px;
height:420px;
overflow:hidden;
}

#carousel ul{
position: absolute; left:0px; top:0px;
width:3000px;
height:420px;
}

#carousel ul li{
position: absolute; left:0px; top:0px;
width:700px;
height:420px;
background: url(../images/carousel_bg.png);
}

#carousel ul li div{
position:absolute; left:75px; top:96px; z-index:10;
width:295px;
color:#7b7b7b;

}

#carousel ul li div h2{
padding-bottom:25px;
font-size:45px;
color:#2b2b2b;
text-transform:uppercase;
}

#carousel ul li div h3{
margin:0 0 13px 0;
font-size:22px;
color:#a4a6a8;
min-height:73px;
border-bottom: dashed 1px #c8c8c8;
}

#carousel ul li a{
position:absolute; left:87px; bottom:50px; z-index:20;
display:block;
width:115px;
height:36px;
color:#fff;
text-transform:uppercase;
text-align:center;
line-height:36px;
border-radius:3px;
background: #2488ba; /* Old browsers */
background: -moz-linear-gradient(top, #2488ba 1%, #2277a2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#2488ba), color-stop(100%,#2277a2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2488ba 1%,#2277a2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2488ba 1%,#2277a2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2488ba 1%,#2277a2 100%); /* IE10+ */
background: linear-gradient(to bottom, #2488ba 1%,#2277a2 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#2488ba', endColorstr='#2277a2',GradientType=0 ); /* IE6-8 */

}

#carousel ul li img{
display:block;
position:absolute; right:10px; bottom:20px; z-index:5;
}

[/css]