Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

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,844 ✭✭✭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