如何把所有的图片从文件夹放入CSS框
How to put all of the images from folder into CSS box
我有一个问题,从一个文件夹加载所有的图像,并显示在一个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代码:
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.');
}
});
});
这是我的CSS框:
#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答案,我从
相关文章:
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 限制对HTML/CSS/IMG或根索引文件夹的访问
- Yii2从js脚本的页面上添加来自供应商文件夹的图像、css、js文件
- angularjs模板和指令文件夹中的css
- 插件无法在文件夹中找到其 css 样式
- 从javascript更改css文件夹
- CSS 在带有 js 的模板中不起作用,而 html 文件在文件夹中
- jQuery日期选择器上一个和下一个按钮没有显示,如何指向css中的主题文件夹图像
- 使用grunt watch复杂处理从LESS到CSS的多个文件夹
- 我的所有css和javascript都应该在自己的文件夹中吗
- 从子文件夹访问CSS图像时不显示
- 如何使用HTML Javascript CSS从文件夹中按顺序显示图像
- 在linemanjs中引用供应商文件夹css和js
- Twitter Bootstrap(和类似的CSS框架)文件夹位置
- 链接html和css文件在不同的文件夹
- CodeIgniter:包含在视图文件夹中的JS或CSS
- 组织Javascript库的最佳实践CSS文件夹结构
- 如何把所有的图片从文件夹放入CSS框
- 用于检查CSS和JS文件文件夹的工具
- 使用 jquery 脚本页面从当前文件夹设置 CSS 图像