Kód: Vybrat vše
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
obr = 0; cas = 1000;
obrazky = ['01.jpg',
'02.jpg',
'03.jpg',
'04.jpg',
'05.jpg',
'06.jpg',
'07.jpg',
'08.jpg',
'09.jpg',
'10.jpg',
'11.jpg',
'12.jpg',
'13.jpg',
'14.jpg',
'15.jpg',
'16.jpg',
'17.jpg',
'18.jpg',
'19.jpg',
'20.jpg',
'21.jpg',
'22.jpg',
'23.jpg',
'24.jpg'];
function animation(){
if (obr==obrazky.length) obr=0;
obrazek.src = obrazky[obr++];
window.setTimeout('animation()',cas);
}
</script>
</head>
<body onLoad="animation()">
<img src="01.jpg" name="obrazek" width="640" height="480" alt="Fotogalerie (animace)">
</body>
</html>Kód: Vybrat vše
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="jquery.min.js"></script>
<script>
var photos = ['01.jpg',
'02.jpg',
'03.jpg',
'04.jpg',
'05.jpg',
'06.jpg',
'07.jpg',
'08.jpg',
'09.jpg',
'10.jpg',
'11.jpg',
'12.jpg',
'13.jpg',
'14.jpg',
'15.jpg',
'16.jpg',
'17.jpg',
'18.jpg',
'19.jpg',
'20.jpg',
'21.jpg',
'22.jpg',
'23.jpg',
'24.jpg'];
var current = 0;
function slideshow() {
$('#header').animate({ opacity: 0 }, 200, function() {
$('#header').css("background-image", "url("+photos[current]+")");
$('#header').animate({ opacity: 1 }, 200);
});
if(current == photos.length-1) {
current = 0;
} else {
current++;
}
}
$(document).ready(function() {
interval = setInterval(function() {slideshow();}, 1000);
});
</script>
</head>
<body>
<div id="header" style="width: 640px; height: 480px"></div>
</body>
</html>