Question

我要做的是以下内容：我有多个带图片的文件夹。上一页根据单击的链接发送不同的$ _GET变量，然后if语句接受该变量并运行该函数来搜索所有图片并显示它们，然后我使用css来设置内容的样式。就是这样。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="Css/featuredCSS.css"/>
  <link rel="stylesheet" type="text/css" href="Css/indexCSS.css"/>
  <?php

只是标题

    include("header.php");

我的数组，我现在只有两个条目，但它将超过20个

    $file_dir = array("img/houses/lux_/lux_1/*.*", 
              "img/houses/lux_/lux_2/*.*");

和功能。我花了一段时间才弄明白如何让它完成所有事情，但我得到了它：）

    function PicLoads($file_dir){
      $files = glob($file_dir); 
      for ($i=1; $i<count($files); ++$i) { 
         $num = $files[$i]; 
         echo '<div id="images"><img id="image'.$i.'"src="'.$num.'"/></div>';

       echo '<div id="slider">';

                $b=1;
                do {
                    echo '<a href="#image'.$b.'">'.$b.'</a>';
                    ++$b;
                } while ($b < $i);

        echo '</div>';
      }
    }

?>

</head>
<body>
<div class="content-warp">

调用该函数的if（）语句。

    <?php if($_GET["house"] == "lux_1"){PicLoads($file_dir[1]);}?>


        </div>

</body>
<!--<?php include("footer.php"); ?>-->
</html>

非常简单......问题在于样式没有完全应用。这是css：

.content-warp {
    position: absolute;
}

body {
    text-align: center;
}
#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
    opacity: 1;
}
#slider a {
    text-decoration: none;
    background: #70c6d1;
    padding: 4px 6px;
    color: #fff;
    border-radius: 200px;
}
#slider a:hover {
    background: #55b5f0;
}

唯一适用的是圆角。

所以我的问题是，如何让css完全适用于php函数制作的html？

更新：

这是我以前的功能，没有功能。问题是，如果我这样做，我必须坐在那里手动输入所有这些像70多次。每次都有不同的参数....那很多

    <?php if($_GET["house"] == "lux_1"){ ?>
        <div id="images">
            <?php
                $files = glob("img/houses/lux_/lux_1/*.*"); 
                for ($i=1; $i<count($files); $i++) { 
                    $num = $files[$i]; 
                    echo '<img id="image'.$i.'"src="'.$num.'" alt="">'."&nbsp;&nbsp;"; 
                }
            ?> 
        </div>

        <div id="slider">
            <?php 
                $b=1;
                do {
                    echo '<a href="#image'.$b.'">'.$b.'</a>';
                    ++$b;
                } while ($b < $i);
            ?>
        </div>
    <?php } ?>

Answer 1

实际上您的内容不属于正文部分，因此请尝试将其放入<Body>标记

我的意思是这一部分：

<?php    

    include("header.php"); 


    $file_dir = array("img/houses/lux_/lux_1/*.*", 
              "img/houses/lux_/lux_2/*.*");

    function PicLoads($file_dir){
      $files = glob($file_dir); 
      for ($i=1; $i<count($files); ++$i) { 
         $num = $files[$i]; 
         echo '<div id="images"><img id="image'.$i.'"src="'.$num.'"/></div>';
      }
    }

?>

Answer 2

我弄清楚我做错了什么！：d

更新代码：

<!DOCTYPE html>
<html>
<head>
<title>b-International</title>
<link rel="stylesheet" type="text/css" href="Css/featuredCSS.css"/>
<link rel="stylesheet" type="text/css" href="Css/indexCSS.css"/>

<?php 
    include("header.php");
    $file_dir = array("img/houses/lux_/lux_1/*.*", 
              "img/houses/lux_/lux_2/*.*");

    function PicLoads($file_dir){
        $files = glob($file_dir);

使$ i成为在两个函数中使用的全局变量

        global $i;

并改变了这个：

for ($i=1; $i<count($files); ++$i) { 
     $num = $files[$i]; 
     echo '<div id="images"><img id="image'.$i.'"src="'.$num.'"/></div>';

   echo '<div id="slider">';

            $b=1;
            do {
                echo '<a href="#image'.$b.'">'.$b.'</a>';
                ++$b;
            } while ($b < $i);

    echo '</div>';
  }

到此：

        for ($i=1; $i<count($files); ++$i) { 
            $num = $files[$i]; 
            echo '<img id="image'.$i.'"src="'.$num.'"/>';
        }
    }//end PicLoads

添加了底部的小导航按钮的功能

    function slide(){
        global $i;
        echo '<div id="slider">';
        $b=1;
        do {
            echo '<a href="#image'.$b.'">'.$b.'</a>';
            ++$b;} while ($b < $i);
        echo '</div>';
    }//end slide
?>


</head>
<body>

<div class="content-warp">

并从中更改了if（）语句：

<?php if($_GET["house"] == "lux_1"){PicLoads($file_dir[1]);}?>

到此：

    <?php if($_GET["house"] == "lux_1"){ 
        echo '<div id="images">';    
        PicLoads($file_dir[1]);
        echo '</div>';
    }

    ?>
slide();
        </div>

结束！的xD

</body>
<!--<?php include("footer.php"); ?>-->
</html>

之所以将图像一个接一个地加载，是因为<div id="images">位于for {}循环中。

非常感谢你帮助我。

css没有完全应用于php函数

2 个答案: