Jquery拼图

我有一个 php 脚本，它从文件夹中返回随机 jpg 图像的名称。这很好，因为我根本不需要重命名图像；我只是将它们放在文件夹中，随机发生器就可以工作了。现在，我这样调用脚本 - http://mydomain.com/images/rotate.php - 在简单的网页重新加载时，它会交换图像。

但我想让它与 jQuery 一起工作，因为我希望每隔 10 秒左右将图像换成新图像，并将它们淡入和淡出。

编辑 1/23/10:

这是通过交换 spacer.gif 来实现的。可能有更优雅的解决方案，但这对我有用。 Munch 通过 MidnightLightning 的一个想法弄明白了:

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

这是 rotate.php:

<?php

$folder = '.';


    $extList = array();
    $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png';


$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);

    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}

if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}

?>

最佳答案

我看到这样做的缺点是新图像会有一个加载期，动画可能因此有点古怪。如果 $_GET 值等于一件事，则该文件有两个部分，返回路径可能是有益的，如果 $_GET 值未设置或等于其他值，则返回图像。这样您就可以预加载一系列图像，图像之间的动画效果会更流畅。

话虽如此，在我看来，这样的事情应该可行。

$(document).ready(function(){
   function swapImage(){
      var time = new Date();
      $('#image').fadeOut(1000)
       .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
       .fadeIn(1000);
   }

   var imageInterval = setInterval('swapImage()',10*1000); 
});

时间使浏览器认为它正在获取新图像。

间隔.gif

要使用黑色垫片做到这一点，我建议将您的图像包裹在一个 div 中，并为 div 提供 #000 背景颜色以匹配垫片:

#image-wrap{background-color:#000;}

它会使图像实际上淡化为黑色，而不是淡化为您当前的背景颜色，更改为黑色，然后淡入。js 与上面的非常相似:

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

可能没有必要将时间保留在那里，但是嘿，这是防止浏览器缓存“图像”的另一种安全措施。

关于php - jQuery 和 php 图像旋转拼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2040372/