Javascript php：从文件夹中的图片创建数组并交换显示它们？_Javascript_Php_Html_Arrays

Javascript php：从文件夹中的图片创建数组并交换显示它们？

javascript php html arrays

Javascript php：从文件夹中的图片创建数组并交换显示它们？,javascript,php,html,arrays,Javascript,Php,Html,Arrays,下面的代码应该使用php从以.png结尾的目录中找到的图片创建一个数组，然后允许按钮更改数组上的指针，并允许页面显示指针所在的当前图片。这似乎根本不起作用。我这样做对吗 <!DOCTYPE HTML> <html> <head> <style type="text/css"> img {float:left; } </style> </head> <body> <?PHP $pages = array ()

下面的代码应该使用php从以.png结尾的目录中找到的图片创建一个数组，然后允许按钮更改数组上的指针，并允许页面显示指针所在的当前图片。这似乎根本不起作用。我这样做对吗

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {float:left; }
</style>
</head>
<body>
<?PHP
$pages = array ();
$dirname = "assets/pictures/";
$images = glob($dirname."*.png");
foreach($images as $image) {
$pages[] = $image;
}
?>
<?PHP
echo '<img src="'.current($pages).'" class="photo"/>';
function shownext() {
$mode = next($pages);
}
function showprev() {
$mode = prev($pages);
}
function showfirst() {
$mode = reset($pages);
}
function showlast() {
$mode = end($pages);
}
?>
<a href="" onclick="showfirst()">first</a>
<a href="" onclick="showprev()">previous</a>
<a href="" onclick="shownext()">next</a>
<a href="" onclick="showlast()">last</a>
</body>
</html>


img{float:left；}

onclick，用于触发javascript函数。

onclick

将允许您调用javascript函数，而您的

showprev

…

showlast

函数都是php函数。它们在javascript的作用域中不可用

另外，在php代码中：

您在

$pages[]=$image

之后立即关闭循环，我想您打算显示（打印/回显）所有图像

将

$pages

复制到

$images

不需要循环。您可以轻松地复制它：

$pages=$images

您应该知道，

current

仅在循环内部有意义，并且在循环关闭后调用它

不过，我认为您混淆了服务器端（即php）和客户端（即javascript）执行环境。

问题在于

echo'
无论您以后多么频繁地更改$pages
，这都会得到一次回显。您也不能使用JavaScript的onclick调用PHP函数
PHP将在服务器端生成页面！在完全老化的页面上，与用户的大多数交互都是通过JavaScript完成的
为了获得您想要的结果，您必须将数组导出到JavaScript并通过JavaScript更改图像src，稍作研究将对您有所帮助。
您不能直接将php函数
放在onclick=“”
事件上。或者，如果您想使用jQuery，可以使用$.ajax
在PHP上请求值。在获得图像路径后，在客户端操作next、prev、first、last
。考虑这个例子：
<?php

if(isset($_POST['getimages'])) {
    $dirname = "assets/pictures/";
    $images = glob($dirname."*.png");
    // collect the images
    foreach($images as $image) {
        $pages[] = $image;
    }
    echo json_encode($pages);
    exit;
}

?>

<img src="" alt="" id="images" width="200" height="200" />
<br/>
<a href="#" class="navigate" id="first">First</a>
<a href="#" class="navigate" id="previous">Previous</a>
<a href="#" class="navigate" id="next">Next</a>
<a href="#" class="navigate" id="last">Last</a>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var current_pointer = 0;
    var images = [];

    $.ajax({
        url: 'index.php', // call the php file that will process it, i just used this in the same page
        type: 'POST',
        dataType: 'JSON',
        data: {getimages: true},
        success: function(response) {
            // after a successful response from PHP
            // use that data and create your own array in javascript
            images = response;
            $('#images').attr('src', images[current_pointer]);

        }
    });

    // simple pointer to navigate the array you got from PHP
    $('a.navigate').on('click', function(){

        var current_val = $(this).attr('id');
        switch(current_val) {
            case 'first':
                current_pointer = 0;
            break;
            case 'last':
                current_pointer = images.length-1;
            break;
            case 'next':
                current_pointer = (current_pointer >= images.length-1) ? images.length-1 : current_pointer+1;
            break;
            case 'previous':
                current_pointer = (current_pointer < 0) ? 0 : current_pointer-1;
            break;
        }

        $('#images').attr('src', images[current_pointer]);
    });

});
</script>




$（文档）.ready（函数（）{
var current_指针=0；
var图像=[]；
$.ajax({
url:'index.php'，//调用将处理它的php文件，我只是在同一页面中使用了它
键入：“POST”，
数据类型：“JSON”，
数据：{getimages:true}，
成功：功能（响应）{
//在PHP成功响应之后
//使用这些数据并用javascript创建自己的数组
图像=响应；
$（'#images'）.attr（'src'，images[当前#指针]）；
}
});
//用于导航从PHP获得的数组的简单指针
$（'a.navigate'）。在（'click'，function（）上{
var current_val=$（this.attr（'id'）；
开关（电流值）{
第一个案例：
当前_指针=0；
打破
“最后”一案：
当前_指针=images.length-1；
打破
“下一个”案例：
当前指针=（当前指针>=images.length-1）？images.length-1：当前指针+1；
打破
“先前”案例：
当前指针=（当前指针<0）？0：当前指针-1；
打破
}
$（'#images'）.attr（'src'，images[当前#指针]）；
});
});
不能直接在onclick
上调用php函数。您可能需要使用ajax。PHP首先在服务器端执行，然后将html发送到客户端，javascript处理客户端交互。这是学习web编程最重要的一点。在需要在函数调用链接旁边显示图片之前，此代码似乎一直在运行。框内没有显示任何内容。@user3743779所以链接（first、prev、next、last
）根本不起作用？你能解释一下吗？在我发布这个之前我测试了它