Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/265.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将PHP和jQuery结合起来，在图片上循环，匹配ID，并在幻灯片中输出图像_Javascript_Php_Jquery_Slideshow - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 将PHP和jQuery结合起来，在图片上循环，匹配ID，并在幻灯片中输出图像

Javascript 将PHP和jQuery结合起来，在图片上循环，匹配ID，并在幻灯片中输出图像

javascript php jquery

Javascript 将PHP和jQuery结合起来，在图片上循环，匹配ID，并在幻灯片中输出图像,javascript,php,jquery,slideshow,Javascript,Php,Jquery,Slideshow,我有下面的代码。它所做的是，它循环遍历目录中的所有图片，并将它们与以前保存的ID进行比较。到目前为止效果很好 <body> <div class="cycle-slideshow"> <?php $selection = $_GET["selection"]; $selectionAsArray = explode(",", $selection); //print_r($selectionAsArray); $dir="

我有下面的代码。它所做的是，它循环遍历目录中的所有图片，并将它们与以前保存的ID进行比较。到目前为止效果很好

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
现在，我不仅想显示图片，还想将它们包含在这些奇特的jQuery幻灯片中（这里我想使用Cycle插件：）。PHP代码是在服务器端执行的，我想这就是为什么幻灯片到目前为止还不能正常工作的原因。对吗？你知道我该如何组合滑块才能正常工作吗？或者这在这种组合中是不可能的

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
编辑：用基本jQuery幻灯片循环2包围PHP代码 

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>


" 
width=“960”height=“540”/>
编辑：HTML输出 

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
如果我把它放在一个HTML文件中，它可以正常工作。

因为您的代码已经输出了
img
标记，为了让您更好地了解如何组合jQuery插件，我将这样做：

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
查看基本示例的源代码：然后用代码替换您看到的
img
标记：

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
});
</script>
</head>
<body>
        <div class="slideshow">

<?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //loop over all selected Ids and compare them with the counter (Id) of 
    //the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    //skip the . and .. elements
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
            <img u="image" src="<?php echo $picinfo['dirname']
           ."/".$picinfo['basename'];?>" width="200" height="200" />
            <?php

            };      
        $counter++;
        }
    }
    ?>


        </div>
</body>
</html>


JQuery循环插件-基本演示
.slideshow{高度：232px；宽度：232px；边距：自动}
.slideshow img{填充：15px；边框：1px实心#ccc；背景色：#eee；}
$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:‘淡入’//选择您的转换类型，例如：淡入、向上滚动、洗牌等。。。
});
});
“width=“200”height=“200”/>
您应该能够像运行脚本一样运行它：将其另存为
slideshow.php
，并将其放置在与您发布的脚本相同的位置，然后访问
http://www.yourwebsite.com/your/dir/slideshow.php

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
我已经根据演示制作了200x200px的图像，因此您可能需要编写一些代码，根据相关的宽高比更改大小。希望这能让您了解如何结合jQuery、HTML和PHP

<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>
您是对的，PHP代码将在服务器端执行，其余代码将在客户端执行。当服务器收到页面请求时，PHP将生成HTML，然后作为页面的一部分传递给您。Javascript随后将由您的浏览器执行。

什么不起作用？查看文档，您需要将图像包装在
…
中。您还包括了所需的js/jQuery脚本吗？是的，正如我所说的，代码确实有效。问题在于，幻灯片无法按预期工作，因为在服务器端，HTML输出已经准备好，而客户端的jQuery内容又没有被正确地包括进来（？！），这导致所选图像彼此重叠显示，而不是漂亮的幻灯片输出。当然，它被相应的幻灯片标签所包围。很抱歉，您应该已经添加了这一点。您可以显示一个html输出的示例，包括js/jQuery代码吗？如果您正在显示图像，但在幻灯片中没有正确显示，则可能是包含js/jQuery代码的方式。问题是，幻灯片的执行方式并不是简单地将图片包含在HTML文件中，而图片只是显示在彼此的上方。没有任何影响。Jquery包含正确；）谢谢，但这并不能解决问题。请你再看一下好吗？非常感谢。你用的是什么浏览器？您的控制台中有任何错误吗？使用Chrome，但是如果使用.php文件的HTML输出，一切都会正常工作。所以这可能与浏览器无关。而且你的Chrome控制台没有错误？如果您的PHP正在工作，那么您需要确保没有Javascript错误。 
<body>
<div class="cycle-slideshow">

    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1

    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php

            };      
        $counter++;
        }
    }
    ?>

</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>

<body>
<div class="cycle-slideshow">

<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />

</div>
</body>