Hi,
I'm currently working on a site's HTML code and am wondering how can I achieve this: I need to make certain images change, in a form of a slideshow, randomly and with random intervals; this means I will need it to start with a certain image and to go on with showing random images in a specified folder, and all that with random time intervals (somewhere between 3 and 8 seconds).
What I do have currently is a page that changes images with fading effect, follows a certain order, and it does it all with the time interval of 6000 miliseconds, or 6 seconds (setInterval() function).
Below is the code I have now, and at the bottom of the page are the names of the images (slika-1, slika-2 and slika-3). I've tried a few stuff, but to no avail; I didn't want to spoil the code. So what I do need is the slideshow to change images with random time intervals like, for example: [first image] 4 seconds [another image] 7 seconds [another image] 5 seconds etc...
Anyone has ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>DOOR Training Serbia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="description" content="DOOR je posvećen unapređenju performansi i efikasnosti svojih klijenata kroz sticanje i usavršavanje veština savremenog poslovanja. Svoju misiju ostvaruje kroz specifične obuke praćene alatima za procenu polaznika pre njenog pohađanja, u toku samog treninga, kao i praćenje napretka nakon njega.">
<link rel="shortcut icon" href="http://www.door-serbia.net/slike/door.ico">
<link href="index.php_files/glavni.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="../css/iefixes.css">
<script src="js/nofocus.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
/* rotator in-page placement */
div.rotator {
position:relative;
height:345px;
margin-left: 15px;
display: none;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
border:1px solid #ccc;
background: #FFF;
}
div.rotator ul li.show {
z-index:500
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">
//Get a random number between 1-6 (1000-6000) and add 2000, to get one between 3000-8000
var random = Math.ceil(Math.random() * 6) * 1000 + 2000;
function randomTime()
{
random = Math.ceil(Math.random() * 6) * 1000 + 2000;
}
function theRotator() {
//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 1.0});
//Call the randomTime() function randomly between 3-8 s
setInterval('randomTime()',6000);
//Call the rotator function to run the slideshow, random = call the rotate() function between 3-8 s
setInterval('rotate()',random);
}
function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
//Un-comment the 3 lines below to get the images in random order
//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(1000);
$('div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>
</head>
<body id="home">
<div id="container">
<div id="wrapper_content">
<!-- HEADER -->
<div id="header"><a href="http://www.door-serbia.net/srpski/index.php" title="DOOR Training Serbia"><img src="index.php_files/DOOR_logo_Serbia.jpg" alt="DOOR Training Serbia" id="logo" height="80" width="176"></a><table id="citat" style="position: relative; top: 0px; float: right; margin: 12px 16px 0px 0px;" border="0" height="80" width="auto"><tbody><tr><td style="text-align: left; vertical-align: bottom; font-size: 11.5px;">Ako želite da sagradite brod, ne terajte ljude da skupljaju građu i alat,<br>ne zapovedajte im šta da rade, već ih naučite da žude za beskrajnim<br>daljinama iza horizonta.</td></tr><tr><td style="text-align: right; font-size: 11px;">Antoine de Saint-Exupéry (1900-1944)</td></tr></tbody></table>
</div>
<!-- FIN HEADER -->
<!-- MENUS -->
<div id="menus">
<ul>
<li><a href="http://www.door-serbia.net/srpski/index.php" class="current"><b>Početna</b></a></li>
<li><a href="http://www.door-serbia.net/srpski/a100_about.php"><b>O nama</b></a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a101_history.html">Istorijat</a></li>
<li><a href="http://www.door-serbia.net/srpski/a102_principles.html">Principi poslovanja</a></li>
<li><a href="http://www.door-serbia.net/srpski/a103_team.html">Naš tim</a></li>
<li><a href="http://www.door-serbia.net/srpski/a104_network.html">DOOR mreža</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a200_programs.php"><b>Programi</b></a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a201_integrative.html">Integrativna rešenja</a></li>
<li><a href="http://www.door-serbia.net/srpski/a202_sector.html">Sektorski pristup</a></li>
<li><a href="http://www.door-serbia.net/srpski/a203_leader.html">Liderski programi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a204_universal.html">Univerzalni treninzi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a205_special.html">Specijalni programi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a206_global.html">Globalno partnerstvo</a></li>
<li><a href="http://www.door-serbia.net/srpski/a207_catalogue.html">Katalog treninga</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a300_wiifm.php"><b>Timbilding</b></a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a301_philosophy.html">Filozofija</a></li>
<li><a href="http://www.door-serbia.net/srpski/a302_locations.php">Lokacije</a></li>
<!--<li><a href="a303_galery.html">Galerija</a></li>-->
</ul>
</li>
<!--<li><a href="koucing.html"><b>Koučing</b></a></li>-->
<li><a href="http://www.door-serbia.net/srpski/a400_references.php"><b>Reference</b></a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a401_international.html">Internacionalne</a></li>
<li><a href="http://www.door-serbia.net/srpski/a402_region.html">Regionalne</a></li>
<li><a href="http://www.door-serbia.net/srpski/a403_industry.html">Granske</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a500_download.php"><b>Preuzimanja</b></a></li>
<li><a href="http://www.door-serbia.net/srpski/a600_contact.php"><b>Kontakt</b></a></li>
<li><a href="http://www.door-serbia.net/srpski/a700_map.php"><b>Mapa sajta</b></a></li>
</ul>
</div>
<!-- LEFTCOL -->
<div id="leftcol">
<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"></div>
<div class="Block-bl"></div>
<div class="Block-br"></div>
<div class="Block-tc"></div>
<div class="Block-bc"></div>
<div class="Block-cl"></div>
<div class="Block-cr"></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="header-tag-icon">
<div class="t">Navigacija</div>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.door-serbia.net/srpski/index.php" class="current">Početna</a></li>
<li><a href="http://www.door-serbia.net/srpski/a100_about.php">O nama</a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a101_history.html">Istorijat</a></li>
<li><a href="http://www.door-serbia.net/srpski/a102_principles.html">Principi poslovanja</a></li>
<li><a href="http://www.door-serbia.net/srpski/a103_team.html">Naš tim</a></li>
<li><a href="http://www.door-serbia.net/srpski/a104_network.html">DOOR mreža</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a200_programs.php">Programi</a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a201_integrative.html">Integrativna rešenja</a></li>
<li><a href="http://www.door-serbia.net/srpski/a202_sector.html">Sektorski pristup</a></li>
<li><a href="http://www.door-serbia.net/srpski/a203_leader.html">Liderski programi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a204_universal.html">Univerzalni treninzi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a205_special.html">Specijalni programi</a></li>
<li><a href="http://www.door-serbia.net/srpski/a206_global.html">Globalno partnerstvo</a></li>
<li><a href="http://www.door-serbia.net/srpski/a207_catalogue.html">Katalog treninga</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a300_wiifm.php">Timbilding</a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a301_philosophy.html">Filozofija</a></li>
<li><a href="http://www.door-serbia.net/srpski/a302_locations.php">Lokacije</a></li>
<!--<li><a href="a303_galery.html">Galerija</a></li>-->
</ul>
</li>
<!--<li><a href="koucing.html">Koučing</a></li>-->
<li><a href="http://www.door-serbia.net/srpski/a400_references.php">Reference</a>
<ul>
<li><a href="http://www.door-serbia.net/srpski/a401_international.html">Internacionalne</a></li>
<li><a href="http://www.door-serbia.net/srpski/a402_region.html">Regionalne</a></li>
<li><a href="http://www.door-serbia.net/srpski/a403_industry.html">Granske</a></li>
</ul>
</li>
<li><a href="http://www.door-serbia.net/srpski/a500_download.php">Preuzimanja</a></li>
<li><a href="http://www.door-serbia.net/srpski/a600_contact.php">Kontakt</a></li>
<li><a href="http://www.door-serbia.net/srpski/a700_map.php">Mapa sajta</a></li>
</ul>
</div>
<div class="BlockContent-body">
<form method="get" action="search.php" class="zoom_searchform"><input name="zoom_sort" value="0" type="hidden"><input name="zoom_query" style="width: 152px;" value="Pretraga" id="zoom_searchbox" class="zoom_searchbox" type="text"></form>
</div>
</div>
</div>
</div>
<!-- FIN LEFTCOL -->
<!-- CENTRE -->
<div class="rotator" id="center">
<!-- <p><img src="../slike/000_intro.gif" alt="photo" id="pix" width="100%"></p> -->
<table style="text-align: center;" border="1" cellpadding="3" cellspacing="1" width="536px">
<tbody><tr>
<td style="text-align: center; vertical-align: top; padding: 0px; background-color: rgb(204, 204, 255);" width="35px">
<a href="http://www.door-serbia.net/srpski/index.php?parametar=1">
<img src="index.php_files/a10.jpg" alt="photo" id="pix1" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
<td style="text-align: center; vertical-align: top; padding: 0px; background-color: rgb(204, 204, 255);" width="35px">
<a href="http://www.door-serbia.net/srpski/index.php?parametar=3">
<img src="index.php_files/a30.jpg" alt="photo" id="pix2" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
<td style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255);" width="456px">
<ul>
<li class="show"><a href="http://www.door-serbia.net/srpski/index.php?parametar=12"><img src="index.php_files/slika-1.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
<li><a href="http://www.door-serbia.net/srpski/index.php?parametar=12"><img src="index.php_files/slika-2.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
<li><a href="http://www.door-serbia.net/srpski/index.php?parametar=12"><img src="index.php_files/slika-3.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
</ul>
</td>
</tr>
</tbody></table>
</div>
<div id="center">
<br>
<p style="font: bold 18px/24px Verdana, Tahoma, Arial, Helvetica, sans-serif; padding-top: 6px;">
DOOR TRAINING & CONSULTING
</p>
<p><b>DOOR Training & Consulting</b> je kompanija posvećena unapređenju performansi
i efikasnosti svojih klijenata kroz sticanje i usavršavanje veština i
znanja potrebnih za savremeno poslovanje. Svoju misiju ostvaruje kroz
praktične programe dopunjavane alatima za procenu polaznika i pre, i u
toku pohađanja obuke, kao i praćenje napretka nakon završenih treninga.</p>
<p>Naši <a href="http://www.door-serbia.net/srpski/a400_references.php">klijenti</a> su pojedinci, timovi,
kompanije, državna ministarstva...</p>
<p><a href="http://www.door-serbia.net/srpski/a104_team.html">Naš tim</a> čine profesionalci koji imaju izraženu
samoinicijativu, samostalnost i strast ka samorazvoju i razvoju svojih
klijenata. Svaki trener u DOOR-u mora biti i jeste sertifikovan za
držanje svakog pojedinog treninga. Proces sertifikacije je vrlo
zahtevan i standardizovan za sve članice <a href="http://www.door-serbia.net/srpski/a105_network.html">DOOR
mreže</a>.</p>
<p><a href="http://www.door-serbia.net/srpski/a201_programs.html">DOOR treninzi</a> su međunarodno priznati, i
za svaki završeni trening polaznici mogu dobiti internacionalni sertifikat.</p>
<p style="font: bold 18px/24px Verdana, Tahoma, Arial, Helvetica, sans-serif; padding-top: 8px;">
<b>Zašto DOOR?</b>
</p>
<p><b>FOKUS NA KOMPETENCIJAMA</b></p>
<p>Svi trening-programi su usmereni ka sticanju praktičnih
kompetencija, koje se zasnivaju na konkretnim veštinama, znanjima i
iskustvima.</p>
<p>Kada god je to moguće, budući polaznici se, po našoj preporuci, anketiraju pre
konačnog definisanja programa treninga. Po potrebi, razvijamo alate procene kojima
utvrđujemo razliku između trenutne i željene situacije na nivou
kompetencija konkretnih zaposlenih, i to nam je glavna vodilja prilikom
krojenja treninga.</p>
<br>
<table>
<tbody>
<tr>
<td width="65%">
<p><b>TRENINZI KROJENI U SKLADU SA CILJEVIMA OBUKE</b></p>
<p>Nakon utvrđivanja potreba i očekivanja polaznika i njihovih
pretpostavljenih, kao i situacione analize, definišemo program obuke.
Proces pripreme, realizacije i evaluacije programa je maksimalno
koordinisan sa klijentima. Nudimo specifične treninge koji su skrojeni
prema željama klijenta i unapred definisanim ciljevima. Vrlo retko
kompanijama isporučujemo već gotove, kataloške trening programe, i to
isključivo na njihov zahtev, onda kada je to opravdano.</p>
</td>
<td width="35%">
<img src="index.php_files/000_fists.jpg" alt="photo" id="pix" align="left" height="210px"></td>
</tr>
</tbody>
</table>
<br>
<p><b>MERLJIVA EFEKTIVNOST SPROVEDENE OBUKE</b></p>
<p>Naša usluga se obično ne završava samim održavanjem obuke. Moguće je
meriti efektivnost održanih treninga, i na zahtev klijenta, uz pomoć
zajednički definisanih alata, procenjujemo rezultate obuke koje
zaposleni pokazuju u praksi.</p>
<br>
<p><b>DOOR AKADEMIJA</b></p>
<p>Naši treneri su eksperti u svojim oblastima i konstantno prolaze
kroz sertifikacionu obuku organizovanu u okvirima DOOR akademije.
Zahvaljujući tome naši klijenti mogu računati na standardizovani,
visoki nivo kvaliteta u svim zemljama gde poslujemo.</p>
<br>
<p><b>KORPORATIVNI UNIVERZITET</b></p>
<p>Multinacionalnim kompanijama i kompanijama sa velikim brojem
zaposlenih pružamo uslugu formiranja korporativnog univerziteta, u
okvirima koga klijent, uz pomoć DOOR metodologije i trenera, može
realizovati standardizovanu obuku unutar mreže svojih zaposlenih. Obuka
na korporativnom univerzitetu može obuhvatati i tehničke i netehničke
programe.</p>
<br>
</div>
<!-- FIN CENTRE -->
<!-- RIGHTCOL -->
<div id="rightcol">
<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"></div>
<div class="Block-bl"></div>
<div class="Block-br"></div>
<div class="Block-tc"></div>
<div class="Block-bc"></div>
<div class="Block-cl"></div>
<div class="Block-cr"></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="header-tag-icon">
<div class="t">Preporuka</div>
</div>
</div>
<div class="BlockContent">
<div class="BlockContent-body">
<a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s6_62.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s6_62.jpg" alt="an image" height="112" width="156"></a>
<a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s1_4.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s1_4.jpg" alt="an image" height="112" width="156"></a>
<a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s5_52.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s5_52.jpg" alt="an image" height="112" width="156"></a>
<a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s4_46.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s4_46.jpg" alt="an image" height="112" width="156"></a>
</div>
</div>
</div>
</div>
</div>
<!-- FIN RIGHTCOL -->
<!-- FOOTER -->
<div id="footer">
<p>© 2011 DOOR Training Serbia · Tel. +381(0)11.3629.148 · Fax +381(0)11.3629.149 · e-mail: <b><a href="mailto:kontakt@door-serbia.net">kontakt@door-serbia.net</a></b><a href="mailto:kontakt@door-serbia.net">
</a></p><a href="mailto:kontakt@door-serbia.net">
</a></div><a href="mailto:kontakt@door-serbia.net">
<!-- FIN FOOTER -->
</a></div><a href="mailto:kontakt@door-serbia.net">
</a></div><a href="mailto:kontakt@door-serbia.net">
<!--privremeno u statusu komentara: <script type="text/javascript" src="js/nospam.js"></script> -->
<script src="index.php_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8694640-4']); _gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</a></body></html>
