Random image slideshow with random time intervals

Question

boris90 0 Newbie Poster

11 Years Ago

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 &amp; CONSULTING
</p>
<p><b>DOOR Training &amp; 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>

images interval javascript random slideshow timer

Edited 11 Years Ago by boris90

2 Contributors
1 Reply
731 Views
21 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by AleMonteiro

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AleMonteiro 238 Can I pick my title? · Answer 1 · 2012-07-23T16:47:06+00:00

I really didn't read all your code, but I think this is the idea you are looking for:

var images = ['img1', 'img2', 'img3', 'img4']; // 4 images
var timeMin = 5000; // 5s
var timeMax = 10000; // 10s

$(function(){   
    changeImage();
});

function changeImage() {
    var imgIndex = getRandom(0, images.length-1);
    var time = getRandom(timeMin, timeMax);     
    $("#test").append("<p>Image changed to <b>" + images[imgIndex] + "</b>. Next change in <b>" + time + "ms<b/></p>");
    setTimeout(changeImage, time);
}

function getRandom(min, max)  {
    var r = Math.floor((Math.random()*(max-min))+min);
    //$("#test").append("<p>getRandom(" + min + ", " + max +") = " + r + "</p>");
    return r;
}

#test is just a div to display the log