Question

以下代码应该从使用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>

Answer 1

onclick ，用于触发javascript函数。

Answer 2

onclick将允许您调用 javascript 功能，而您的showprev ... showlast功能全部 php 功能。它们不适用于javascript的范围。

另外，在你的PHP代码中：

您正在$pages[] = $image之后关闭循环，我认为您打算显示（打印/回显）所有图像。
您不需要循环即可将$pages复制到$images。您可以轻松复制它：$pages = $images。
你应该知道current只在循环中有意义，而你在循环结束后调用它。

我认为，你是在混淆服务器端（即php）和客户端（即javascript）执行环境。

Answer 3

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

无论你之后如何改变$pages，这都会得到回应一次。你也不能用JavaScript的onclick来调用PHP函数。

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

为了达到理想的效果，您必须将数组导出为JavaScript并通过JavaScript更改图像src，稍微研究一下就可以帮到您了。

Answer 4

您无法直接将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>

php：从文件夹中的图片制作数组并交替显示它们？

4 个答案: