如何使用PHP和Javascript滚动浏览图片数组

Question

I have a sql query that pulls an array that contains file paths to my images. 我有一个SQL查询，该查询会拉出一个数组，其中包含指向图像的文件路径。

It is store in the variable $rows and I can access individual paths by indexing throught... 它存储在变量$rows ，我可以通过索引索引来访问各个路径。

IE. IE浏览器。

$rows[0]...$rows[n]

How can I utilize java script to step through this. 我如何利用Java脚本来逐步解决这一问题。

Final goal is for the picture to appear with a "Next" "Previous" button under it. 最终目标是使图片出现在其下方，并带有“下一个”，“上一个”按钮。 Hitting next would show the next image (without a refresh) 点击下一个将显示下一张图片（不刷新）

echo $rows[0];

would print 会打印

images/a.png

Answer 1

Maybe using PHP's json functions you can convert your PHP array to a js array... and then use javascript functions to control which picture to show 也许使用PHP的json函数，您可以将PHP数组转换为js数组...，然后使用javascript函数控制要显示的图片

<script type="text/javascript">
    var images = <?php echo json_encode($rows) ?>, counter = 0;

    function prevImage() {
        counter = (counter<=0)?images.length-1:counter-1;
        var i = document.getElementById('myImage');
        i.src = images[counter];
    }
    function nextImage() {
        counter = (counter==images.length-1)?0:counter+1;
        var i = document.getElementById('myImage');
        i.src = images[counter];
    }
</script>

and 和

<img src="img/0.jpg" id="myImage" />
<a href="#" onClick="prevImage(); return false;">Previous</a> - <a href="#" onClick="nextImage(); return false;">Next</a>

Answer 2

Here is a little example to move your php array to a javascript array: 这是一个将您的php数组移动到javascript数组的小示例：

<?php
    $row = array("image/image1","image/image2","image/image3");
?>
<html>
    <head>
    <title>Sample Array</title>
    <script>
    var jsArray = new Array();
    <?php 
    for ($i=0; $i<3; $i++)
    {
         echo "jsArray[$i] = '$row[$i]';";  
    }
    ?>
    for(i = 0; i < jsArray.length;i++)
    {
        alert(jsArray[i]);
    }
    </script>
    </head>
    <body>
        <span>Sample Array</span>
    </body>
</html>

Good luck! 祝好运！

Answer 3

Get your PHP array (server-side) to Javascript (clientside) 将您的PHP数组（服务器端）转换为Javascript（客户端）

There are quite a few ways to go about doing this, but I'd recommend JSON . 有很多方法可以做到这一点，但是我建议使用JSON 。 It has numerous advantages, but the most obvious one is you can store arrays and javascript objects as a string. 它具有许多优点，但是最明显的优点是您可以将数组和javascript对象存储为字符串。 If you're not familiar with it, this would be an excellent time to start including it in your workflow, considering you have to deal with Javascript. 如果您不熟悉它，那么考虑到必须处理Javascript，这将是一个开始将其包含在工作流中的绝佳时机。

PHP PHP

Turn Array to JSON: 将Array转换为JSON：
$jsonResults = json_encode($arrayOfResults);

Get JSON from PHP to Javascript: 从PHP到Javascript获取JSON：

 <script> var myAppsData = {}; myAppsData.slideshowJSON = JSON.parse($jsonResults); </script>

Now your JSON object is accessible to Javascript at myAppsData.slideshowJSON . 现在，您可以通过myAppsData.slideshowJSON使用Javascript访问JSON对象。

The rest of the work is as simple as iterating through the object with a for loop (just like you would in PHP), grabbing the content and doing what you want with it. 剩下的工作很简单，就是使用for循环遍历对象（就像您在PHP中一样），获取内容并使用它进行所需的操作。

Cheers! 干杯!

如何使用PHP和Javascript滚动浏览图片数组

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-12-19 19:04:07

解决方案2
0 2012-12-19 18:35:28

解决方案3
0 2012-12-19 18:45:03

如何使用PHP和Javascript滚动浏览图片数组

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-12-19 19:04:07

解决方案2 0 2012-12-19 18:35:28

解决方案3 0 2012-12-19 18:45:03

解决方案1
1 已采纳 2012-12-19 19:04:07

解决方案2
0 2012-12-19 18:35:28

解决方案3
0 2012-12-19 18:45:03