Jquery拼图
我有一个PHP脚本,可以从文件夹返回随机jpg图片的名称。这很好,因为我根本不需要重命名图片;我只需将它们放入文件夹中,随机器就可以工作。现在,我像这样调用脚本 - http://mydomain.com/images/rotate.php - 并在简单的网页重新加载时,它会交换图片。
但我想使用jQuery使其工作,我想让图片在大约十秒的间隔内交换成新图片,并且淡入淡出。
编辑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);
}
}
?>
fadeOut
/fadeIn
动画,仅尝试每10秒用带有不断改变的后缀的URL交换源代码,那么firebug是否显示图像实际上正在重新加载?也许,与其直接从rotate.php到rotate.php,不妨先通过从rotate.php到spacer.gif再到rotate.php来"卸载"它? - MidnightLightning