我正在使用php,CSS Tricks的Anything Slider jQuery插件和jQuery AJAX来尝试创建一个滑块,我可以在其中将图像添加到目录中并自动更新滑块。下面,我将发布PHP,Javascript和HTML,然后我将解释这些问题。
<?php
function hello(){
$dir ='../images';
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if ($file != "." && $file != ".." && $file != ".DS_Store"&& $file != "../images") {
echo "<li><img src='"http://localhost:8888/wordpress/wp-content/themes/perpetualC/images/$file'" class='"image'"></li> 'n";
//add <li> tags, trying to fix the problem...
}
}
closedir($dh);
}
}
}
hello();
?>
它运行完美,位于一个名为 image.php 的文件中,由以下代码块完美调用。
$(document).ready(function() {
$.get('images.php', function(data) {
var lines = data.split("'n");
$.each(lines, function(n, elem) {
$('#slider').append( elem );
//comment out an attempt to fix the issue, the <li> tags here were replaced by tags in the PHP.
//$('.image').wrap('<li>');
});
});
$('#slider').anythingSlider({
resizeContents: true,
addWmodeToObject: 'transparent',
autoPlay: true,
delay: 1500
});
}); // end ready
现在问题开始了。这将呈现来自Firebug的以下代码块
<section class="stuff">
<div style="width: 860px; height: 200px;" class="anythingSlider anythingSlider-default activeSlider">
<div class="anythingWindow">
<ul style="width: 0px;" class="anythingBase horizontal" id="slider">
<li><img src="http://localhost:8888/images/bg.jpg" class="image"></li>
<li><img src="http://localhost:8888/images/bg.psd" class="image"></li>
<li><img src="http://localhost:8888/images/bg1.jpg" class="image"></li>
<li><img src="http://localhost:8888images/bg2.jpg" class="image"></li>
<li><img src="http://localhost:8888/images/blackTransGradient.png" class="image"></li>
<li><img src="http://localhost:8888/images/whiteTransGradient.png" class="image"></li>
</ul>
</div>
<div style="display: none;" class="anythingControls">
<ul style="display: none;" class="thumbNav">
</ul>
<a style="display: none;" href="#" class="start-stop playing"><span>Stop</span></a></div>
<span style="display: none;" class="arrow back"><a href="#"><span>«</span></a></span><span style="display: none;" class="arrow forward"><a href="#"><span>»</span></a></span></div>
这。。。什么都不做!正常工作的任何滑块将在<li>
标签上具有类,这些类按设定的时间间隔更改...这根本没有类。有什么帮助吗?我的问题在哪里?我知道这样的事情是可能的,因为这个jsFiddle,http://jsfiddle.net/Cm479/248/但我不确定如何解决我的问题
你在 JavaScript 上有一个部分竞争条件。滑块正在查看它们尚不存在的图片。
试试这个:
$(document).ready(function() {
$.get('images.php', function(data) {
var lines = data.split("'n");
$.each(lines, function(n, elem) {
$('#slider').append( elem );
//comment out an attempt to fix the issue, the <li> tags here were replaced by tags in the PHP.
//$('.image').wrap('<li>');
});
$('#slider img').promise().done(function() {
$('#slider').anythingSlider({
resizeContents: true,
addWmodeToObject: 'transparent',
autoPlay: true,
delay: 1500
});
});
});
});