0

您好我目前有一个 jquery 图像滑块脚本，它从文件夹中提取图像并将它们显示在页面上。

这是带有工作图像滑块的网页：http: //iseeit.no/slidertest/

我想要并且一直试图弄清楚的是在同一页面上有 9 个单独的滑块，这是一个示例图片，它显示了它的外观：

每个灰色框代表滑块

现在我一直在尝试为每张幻灯片制作一个新的 div，但我不知道该怎么做......

这是 index.php 脚本：

幻灯片

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myslides').cycle({
    fit: 1, pause: 2, timeout: 100
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />


</head>
<body>

<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
echo "<div id=\"myslides\">";   
foreach ( new DirectoryIterator($directory) as $item ) {            
    if ($item->isFile()) {
        $path = $directory . "/" . $item;   
        echo "<img src=\"" . $path . "\" />";   
    }
}   
echo "</div>";
}   
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';   
}
?>

</body>
</html>

这是CSS编码：

#myslides {

padding: -8px;
margin: -8px;

} 


#myslides img {

}

所以我想知道我将如何做到这一点？我试图制作一个新的 div，但我没有太多的 php 经验，所以我认为我做得不对......

希望得到一些反馈和一些帮助。

以下是与脚本有关的所有文件：http: //iseeit.no/files/slidertest.rar

4

1 回答 1

0

如果我的问题是正确的，那么您有一个工作滑块，并且希望将更多滑块放在彼此相邻的一页上。如果是这样，那么您可以这样做：

PHP：

    // set the directories of the sliders you want
    $directories = array('images/slideshow', 
                         'images/slideshow2',
                         'images/slideshow3',
                         'images/slideshow4',
                         'images/slideshow5');    

    //create all the image sliders
    foreach($directories as $dir) {
        try {       
            echo '<div class="myslides">';   

            //add slides
            foreach( new DirectoryIterator($dir) as $item ) {            
                if ($item->isFile()) { 
                    echo '<img src="' . $dir . '/' . $item. '" />';   
                }
            }   

            echo '</div>';          
        } catch(Exception $e) {
            //do nothing, just skip the slider
        }
    }

并为类上的滑块设置 jQuery 插件，myslides如下所示：

    <script>
        $(document).ready(function() {
            $('.myslides').cycle({
                fit: 1, pause: 2, timeout: 100
            });
        });
    </script>

您可以使用floats将滑块彼此相邻放置。最佳做法是将ul滑块用作li. 但我暂时把它留了下来div。您可以使用以下 CSS 将它们彼此相邻：

.myslides {
    float: left;
    margin: 0 10px 10px 0; //top, right, bottom, left
    width: 200px; //set the width and height of the sliders (or maybe the slider is doing it?)
    height: 400px;
}

希望这可以帮助！

更新：创建 3x3 的示例代码

$directories = array(0, 1, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7);
$i = 0;
echo '<ul>';

foreach($directories as $dir) {
    // devide $i by 3, is the outcome 0?
    if($i % 3 == 0 && $i != 0) {
        //end row
        echo '</li>';

        //are there more items for the next row?
        if($i != count($directories)) {
            echo '<li>';
        }
    } elseif($i == 0) {
        echo '<li>';
    }

    // your code
    echo 'Jeah!';

    $i++; //add one 
}

//close last element and list
echo '</li></ul>';

输出：

<ul>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
</ul>
于 2012-11-23T10:30:39.547 回答