我有一个问题，从一个文件夹加载所有的图像，并显示在一个CSS框(在html中)。
我想让所有的图像像视频或gif。
因此每个图像将交替出现，直到最后一个图像显示。
下面是我的php代码:camera.php
<?php
$img_dir = "image/";
$images = scandir($img_dir);
$html = '';
$html .='<ul>';
foreach($images as $img) {
if($img === '.' || $img === '..') {continue;}
if ( (preg_match('/.jpg/',$img)) || (preg_match('/.gif/',$img)) || (preg_match('/.tiff/',$img)) || (preg_match('/.png/',$img)) ){
$html .='<li><img src="'.$img_dir.$img.'" ></li>' ;
} else { continue; }
}
$html .='</ul>' ;
echo $html ;
?>
jquery.custom.js
jQuery('document').ready(function() {
$.ajax({
url: "camera.php",
type: "POST",
dataType: "HTML",
success: function( data ) {
jQuery('body').append(data);
},
error: function(jqXHR, data ) {
alert ('Ajax request Failed.');
}
});
});
#myGallery{
position:relative;
width:800px; /* Set your image width */
height:500px; /* Set your image height */
}
我可以让所有的图像出现，但我不知道如何在CSS框中显示它们并使它们都像视频一样。
我有200张照片
谢谢你的帮助。
对于camera.php，您需要以ajax调用可以正确读取的格式返回数据。假设对images的调用正确返回，您可以执行以下操作:
camera.php
$img_dir = "image/";
$images = scandir($img_dir);
$pictures = array();
foreach($images as $img) {
// Not sure how these are returning, so I'm making a guess after looking at your code
$picture = array(
"img" => $img_dir.$img
);
$pictures[] = $picture;
}
echo json_encode($pictures);
对于jQuery，您需要将您的dataType指定为json以使其正确返回。您还需要在成功返回时将所需的html和数据附加到body中，然后在完成后调用动画的函数。
jquery.custom.js
jQuery('document').ready(function() {
var i = 0;
var request = $.ajax({
url: "camera.php",
type: "POST",
dataType: "json",
success: function(pictures){
var html = '<ul'>;
$.each(pictures, function(idx, picture){
html += '<li><img src="'+picture.img+'"></li>'
});
html += '</ul>';
$('body').append(html);
}
});
request.done({
loopThruImg();
});
function loopThruImg() {
var li = $('li');
li.eq(i).animate({
opacity: 1
}, 100, function () {
li.eq(i).delay(1000).animate({
opacity: 0
}, 100, function () {
i = i < (li.length - 1) ? i+1 : 0;
loopThruImg(i);
});
});
}
});
一些有用的CSS
ul {
list-style-type:none;
position: relative;
}
li {
position:absolute;
top:0;
opacity:0;
}
JSFiddle为动画
很棒的Stackoverflow答案，我从