0

我正在使用 php、来自 CSS Tricks 的任何 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/但我不知道如何解决我的问题

4

1 回答 1

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

    });

});
于 2012-05-22T15:00:20.443 回答