Image load time delay

Question

This scripts works, it loads in my images.

I want this to load in a new images after say 10 seconds, when I try this it's not working any suggestions on what I have done wrong?

    <?php header("Refresh: 5; URL=mytestfile.php"); ?>
<div style="width: 964px;">
<div style="float: left; width: 240px;">
<?php $mybanners[1] = '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>';
$mybanners[2] = '<a href="/chiropodist/"><img src="banners/chiropody.jpg"></a>';
$mybanners[3] = '<a href="/fitness-instructor/"><img src="banners/fitness ball.jpg"></a>';
$mybanners[4] = '<a href="/dietician/"><img src="banners/Dietician.jpg"></a>';
$mybanners[5] = '<a href="/alexander-technique/"><img src="banners/Alexander technique.jpg"></a>';

$id = rand(1,5);

echo $mybanners[$id]; 

// this is the section I tried to control the delay

$mybanners = 0;
for($i=0; $i<10000; $i++){
if($i=='10000'){
    $mybanners++;
    $i = 0;
    }
    if($mybanners=='10'){
    $mybanners=0;
 }

}?>

Answer 1

You can't control this via PHP, this is a Javascript use case. The for is not a time related control: http://php.net/manual/en/control-structures.for.php

You sould have a list of images in Javascript:

var myImages = [
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
];

(you can generate this list with PHP of course)

And then, every 10 seconds, do something with it:

var i = 0;
window.setInterval(function() {
  alert(myImages[i]);
  i++;
, 10000}

PHP if for generating pages, there is nothing it can do after the page is served to the client.

Answer 2

If you're trying to cycle using the Refresh header, then the cycle shouldn't be needed.
Also, counting to 10000 does NOT take 10 seconds. And you're using your former urls array as the index... In short, build it again.

Make the urls list available to javascript if you want to rotate them in the browser.

edit: add example

1) make urls available to javascript:

in php, you output the javascript:

echo "<script>";
echo "var urlList = new Array();";
foreach ($urls as $url)
  echo "urlList[urlList.length]='$url';";

2) rotate them This is the basic construct that will run function every 5 secs:

setTimeout(function() {}, 5000);

you need to figure out a way to do the rotation: either keep a counter for the index of the array or try a random:

setTimeout(function() {
  var index = Math.round(Math.rand * urlList.length);
  document.getElementById('#myimg').src.href=urlList[index];
}, 5000);

Note: I'm writing this code here, it's not tested but it should be enough to get you going. Once you get it going, consider using some jQuery.fade transition.