Question

更新：经过多次混淆后发现问题出现在我的样式表中。两个滑块实际上都在加载，但是，定位导致它们重叠，隐藏了第二个（或任何其他）滑块。

我一直在尝试创建使用特定目录中图像的jQuery slider的两个实例。文件夹由不同的脚本生成，每个脚本包含18个图像。似乎只有第一个滑块可以工作。

您可以查看此问题的实际示例 here。

jQuery很简单，但请注意我还在学习PHP，但是我已经能够在我的主目录中列出文件夹并为多个文件创建正确的标记滑块。

<?php
$a = 0;
$b = 0;
$c = 0;

if ($handle = opendir('.')) {
$blacklist = array('.', '..', 'frames', 'carbon_fibre.png', 'panel.png', 'sort.php', 'squares.png', 'test.php', 'test.txt', '360logo.png', '.DS_Store', 'js');
while (false !== ($file = readdir($handle))) {
    if (!in_array($file, $blacklist)) {
        echo "<div id='". ++$a ."'>". ++$b ."</div>";
        echo "<br>";
        echo "<script>
$('#". ++$c ."').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '".$file."/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script><br>";
    }
}
closedir($handle);
}

?>

此脚本的输出为：

<div id='1'>1</div><br><script>
$('#1').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1740/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script><br><div id='2'>2</div><br><script>
$('#2').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1751/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script>

输出似乎是正确的，它在脚本中正确列出了我的目录，但我仍然只看到第一个滑块工作。我应该提一下，这些目录是自动生成的，并以创建的日期和时间为标题。

如果您对我遇到此问题的原因有任何建议或见解，请与我们联系。我非常乐意提供更多信息。我非常感谢你的时间。

Answer 1

我正在检查您的代码和网站作者，确认您可以拥有该插件的大量实例。

我疯了，因为我遇到了和你一样的问题，但我终于发现你有一个CSS问题。两个滑块显示在同一个位置，一个在另一个上方。

浏览器将id 2的底部位置设置为1，但可能应用脚本的内部样式将显示在另一个之上......

如果将此样式应用于div

<div id='1' style="position:absolute;left:1px; top:1px;width:300px;">1</div>

<div id='2' style="position:absolute;right:1px; top:1px;width:300px;">2</div>

你会看到两个滑块在那里。我用这种风格检查你自己的链接示例，我看了两次。干杯

如何创建基于目录的滑块的两个实例？

1 个答案: