image rotation script | 易学教程

问题

So I have this script that will rotate images located in a directory, which works great. However, it requires a refresh of the page in order to rotate the image. Is there a way I can modify this to have it rotate the image when the image itself is clicked? Thanks in advance

HTML:

<img src="rotate.php" alt="random image" />

PHP:

<?php
    $folder = 'images/';

    $exts = 'jpg jpeg png gif';

    $files = array(); $i = -1;
    if ('' == $folder) $folder = './';

    $handle = opendir($folder);
    $exts = explode(' ', $exts);
    while (false !== ($file = readdir($handle))) {
        foreach($exts as $ext) {
            if (preg_match('/\.'.$ext.'$/i', $file, $test)) {
                $files[] = $file;
                ++$i;
            }
        }
    }
    closedir($handle);
    mt_srand((double)microtime()*1000000);
    $rand = mt_rand(0, $i);

    header('Location: '.$folder.$files[$rand]);
?>

回答1:

Update: this is very basic but test it out and see if it works;

 <script>
  function changeImage(o){
   o.src = 'http://www.domain.com/testtest.php?' + (new Date()).getTime(); // time to help stop caching
    }
 </script>
 <img src="http://www.domain.com/testtest.php" onclick="changeImage(this)" />

and in your php add a content header to send the image eg if it is a gif or png...

 <?php
// see link at bottom for getting file extention

 switch ($selected_random_file_extention) {
  case "gif":
     header('Content-type: image/gif');
     $file_ext = "gif"; break;
   case "jpg":
     header('Content-type: image/jpg')
     $file_ext = "jpg"; break;
   case 3:
     header('Content-type: image/png');
     $file_ext = "png"; break;
  }

  //header('Content-type: image/gif'); // send as image 



   //$random_image_name = rand(1,5);

     // you would add $folder.$files[$rand]; and include you script above
     $random_image_name = $folder.$files[$rand]; 



                            // adjust paths as needed
       $img_file = "http://www.domain.com/".$random_image_name.".gif";
                                                               // .$file_ext;


   readfile($img_file);  // not sure how memory will go

    ?>

The idear is to set the header content type and to read and write the file to the output buffer using readfile, armed with this you could use ajax as another means to request the image and using the status to easly display a loading indicator.

If you where to Rewrite the URL you could change the extension of .php for the src or not even have an extention.

http://php.net/manual/en/function.pathinfo.php

using pathinfo 'extension' you can get the extention and then set the approprate Content-type

回答2:

<script>
function changeSrc(element) {
  var file_names = ["image1.png", "image2.png", "image3.png"]; //etc
  var i = Math.floor(Math.random() * file_names.length);
  element.src = file_names[i];
}
</script>
<img src="image1.png" onclick="changeSrc(this)">

Just join your $files into a quoted comma separated string and insert that as the value for the file_names array above.

回答3:

You could add an IFRAME and then with javascript, refresh that frame randomly

回答4:

Have you looked into doing this with ajax? This way you could trigger the PHP, then refresh the image, but not the rest of the page.

回答5:

If you dont want to his client side then I would add a link round your IMG tag and split your PHP script into two files.

<a href="rotate.php"><img src="random.php" alt="random image" /></a>

File 1 (rotate.php): Rotates the images

File 2 (random.php): Redirects to the random image

header('Location: '.$folder.$files[$rand]);

来源：https://stackoverflow.com/questions/8127483/image-rotation-script

标签

php

javascript

html

onclick