Question

您好我目前有一个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

Answer 1

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

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
        }
    }

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

    <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>

使用php在同一页面上显示多个jquery图像滑块

1 个答案: