Php:从文件夹中的图片中创建数组，并交替显示它们

php: make array from pictures in a folder and display them interchangeably?

本文关键字：数组 显示 创建 文件夹 Php      更新时间：2023-09-26

下面的代码应该使用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>

onclick将允许您调用javascript函数，而您的showprev…showlast函数均为php函数。它们在javascript的作用域中不可用。

同样，在你的php代码中:

  1. 您在$pages[] = $image之后关闭循环，我认为您打算显示(打印/回显)所有图像。
  2. 你不需要一个循环复制$pages到$images。你可以很容易地复制它:$pages = $images .
  3. 你应该意识到current只在循环中有意义，你在循环关闭后调用它。

我认为，你混淆了服务器端(即php)和客户端(即javascript)的执行环境。

onclick，用于触发javascript函数

您不能直接将php functions放在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>

问题是echo '<img src="'.current($pages).'" class="photo"/>';

无论之后更改$pages的频率如何，它都会被回显一次。你也不能用JavaScript的onclick调用PHP函数。

PHP将在服务器端生成页面!在一个完全加载的页面上，大多数与用户的交互都是通过JavaScript完成的。

要实现您想要的结果，您必须将数组导出到JavaScript并通过JavaScript更改图像src，稍微研究一下将有助于您。

相关文章：