PHP - 来自文件夹,下一个,随机和上一个图像的随机图像

时间:2014-06-21 02:53:27

标签: php html image twitter-bootstrap random

我是PHP的新手,我试图浏览论坛以获得我的答案,但我找不到我想要的东西。所以我们走了。

所以我只想要一个基本的图像采集器,从我的文件夹中获取一个独特的图像,并在我的网站上回显/打印出来,除此之外,我希望有一个下一个图像按钮,一个前一个按钮和一个随机图像按钮。

这就是我的到来。

我的意思是 Example 。 (是的,它非常基本,但我想学习)

   <?php
    $dir = "images";
    $images = scandir($dir);
    $z = rand(2, sizeof($images)-1);
   ?> 

上面的代码“生成”随机图像,但每次都不是唯一的,例如,如果刷新我的页面,我有可能多次获得相同的图片。 &lt; - 在每次进入页面时获得一个独特的图像,或者在按下随机按钮时不再输入更多信息,这将是很好的,但我们正在进一步向下。

    <div class="container"> <!-- Start Rng Picture -->
     <center><div class="col-md-8 col-md-offset-2">  
     <img src="images/<?php echo $images[$z]; ?>"   alt="Sorry Your Image Are On Vacation" class="thumbnail img-responsive">
    </div></center> <!-- Close Rng Picture -->

上面的代码是我用于显示随机图像的前端代码。

我的最大问题是要了解我如何在我的按钮中获取下一个先前的随机数组。

<div class="navbar navbar-inverse"> <!-- Start Navbar -->
  <div class="navbar-inner">
    <center><div class="btn-group">
                <button type="button" class="btn btn-lg btn-danger>"Previous</button>
                <button type="button" class="btn btn-lg btn-info">Random</button>
                <button type="button" class="btn btn-lg btn-success">Next Pic</button>
        </div></center> 
    </div>
</div> <!-- Close Navbar -->

2 个答案:

答案 0 :(得分:0)

为了解决重复图像问题,添加一个cookie(会话将会这样做),存储用户看过的最后几(5)个图像。然后在选择要显示的图像之前,删除存储在cookie中的五个图像。

就按钮而言,请尝试查看 Ajax

答案 1 :(得分:0)

使用它来避免重复的随机数以避免重复的图像。 你可以设置范围。这里是1到20之间。

  <?php
       for ($i=0; $i<=5; $i++) 
       {
        $num[$i] = rand(1,20);
         for ($j=0; $j<$i; $j++) 
         {            
           while ($num[$j] == $num[$i])
            {              
            $num[$i] = rand(1,20);              
             $j = 0;            
            }          
         }   
       }   
  sort($num);   

  ?>

在您的视图中或您想要打印随机数的任何地方,只需执行以下操作:

  <?php echo $num[1]; ?>

并且您也可以轻松地将图像放入文件夹中,只需为所有图像选择一个唯一的名称,只需在每个图像的末尾附加一个数字并显示如下:

  <img src="images/imagename<?php echo $num[1]; ?>"   alt="Sorry Your Image Are On Vacation" class="thumbnail img-responsive">