Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

HTML Query - Image changing timer

  • 06-10-2011 12:56PM
    #1
    lightbulbie
    Closed Accounts Posts: 9 ✭


    I have a page on my site where i have 5 images, which i want displayed one at a time, each staying up for about 5-6 seconds.

    I have entered the following code :
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    var timerid = 0;
    var images = new Array( "1021.jpg" ,
    "1022.jpg",
    "1023.jpg",
    "1024.jpg",
    "1025.jpg");
    var countimages = 0;
    function startTime()
    {
    if(timerid)
    {
    timerid = 0;
    }
    var tDate = new Date();

    if(countimages == images.length)
    {
    countimages = 3;
    }
    if(tDate.getSeconds() % 5 == 0)
    {
    document.getElementById("img1").src = images[countimages];
    }
    countimages++;

    timerid = setTimeout("startTime()", 1000);
    }
    </script>
    </head>

    <body onload="startTime();">
    <img id="img1" src="1021.jpg" />
    </body>
    </html>

    The images (1021.jpg - 1025.jpg) display but in a random order...firstly image 1021 will display for only 1 second...then 1022 for 5, then 1022 and 1023 will display as they should, but then just keep repeating...so that after 6 seconds its just those 2 images that keep changing....im far from an expert on html so there is probably something obvious im overlooking...

    Any advice appreciated,
    Thanks


Comments

  • #2
    lightbulbie
    Closed Accounts Posts: 9 ✭lightbulbie


    ive found a way around this so thanks but im sorted...i doubled the first image and changed;

    countimages = 3;
    to
    countimages = 1;

    not fully sure as to why it works now but am happy it is

    Thanks


  • #3
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell 


    <html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var timerid = 0;
var images = new Array( "1021.jpg", "1022.jpg", "1023.jpg", "1024.jpg", "1025.jpg");
var countimages = -1;

function startTime()
{
	var tDate = new Date();
	countimages++;
	if(countimages == images.length) {
		countimages = 0;
	}
	document.getElementById('img1').src = images[countimages];
	timerid = setTimeout("startTime()", 5000);
}
</script>
</head>

<body onload="startTime();">
<img id="img1" src="1021.jpg" />
</body>
</html>


  • #4
    py2006
    Registered Users, Registered Users 2 Posts: 9,845 ✭✭✭py2006


    Can anybody confirm how this code performs across the various browsers and platforms?


  • #5
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    lightbulbie wrote: »
    I have a page on my site where i have 5 images, which i want displayed one at a time, each staying up for about 5-6 seconds.

    I have entered the following code :



    The images (1021.jpg - 1025.jpg) display but in a random order...firstly image 1021 will display for only 1 second...then 1022 for 5, then 1022 and 1023 will display as they should, but then just keep repeating...so that after 6 seconds its just those 2 images that keep changing....im far from an expert on html so there is probably something obvious im overlooking...

    Any advice appreciated,
    Thanks

    There could be an issue in relation to the length of time an image is taking to download, causing the code to move on to the next image before one appears.....are they very big images ?


Advertisement