Question

我正在使用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>

这......什么都不做！一个正常工作的Anything Slider将在<li>标签上有一个类，这些类以设定的间隔变化......这根本没有类。有帮助吗？哪里是我的问题？我知道这样的事情是可能的，因为这个jsFiddle，http://jsfiddle.net/Cm479/248/但是我不确定如何解决我的问题

Answer 1

您在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
            });
        });

    });

});

如何创建和AJAX Anything Slider（长篇文章）

1 个答案: