基本的jQuery Slider(BJQS)没有将样式应用于jQuery和XML生成的li元素

时间:2014-10-20 16:37:05

标签: jquery html css xml

我正在尝试使用Basic jQuery Slider和另一个jQuery和一些XML生成的列表,但我发现BJQS不想将样式应用于正在生成的li元素,所以他们不会被隐藏和消失。

进入文档头我有:

<link rel="stylesheet" href="/assets/css/bjqs.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/assets/js/bjqs-1.3.min.js" type="text/javascript">

无论如何,bjqs都需要所有这些,并且根据Firebug正在加载。

我的身体:

<script>
jQuery(document).ready(function(){
  jQuery.ajax({
    type: "GET",
    url: "images-revision.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml) {
    var path = jQuery(xml).find('path').text();

    jQuery(xml).find("image").each(function() {
        jQuery(".bjqs").append("<li><img src='" + path + jQuery(this).find("filename").text() + "'/></li>");
    }); 
}
</script>

在将文件列入BJQS的原位之前,从XML文件中的图像列表中读取。

然后我有了幻灯片容器:

<div id="banner-fade">
    <ul class='bjqs'>
    </ul>
</div>

其次是我想用来控制幻灯片的参数:

<script>
    jQuery(document).ready(function(jQuery) {
        jQuery('#banner-fade').bjqs({
            height      : 198,
            width       : 956,
            automatic : true, // automatic
            showcontrols : false, // show next and prev controls
            usecaptions : false, // show captions for images using the image title tag
            responsive : false, // enable responsive capabilities
            showmarkers : false, // Show individual slide markers
            // animation values
            animtype : 'fade', // accepts 'fade' or 'slide'
            animduration : 750, // how fast the animation are
            animspeed : 5000, // the delay between each slide
        });
    });
</script>

正确的样式应用于#banner-fade和ul.bjqs,但不应用于生成的li元素,这些元素是隐藏并显示为在图像之间旋转的部分。

我觉得这与在创建lis之前调用的BJQS内容有关,但我不会假装知道该怎么做。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

使用窗口加载http://api.jquery.com/load-event/而不是为bjqs参数修复此部分的文档做好准备工作了。

所以我更换了这个:

jQuery(document).ready(function(jQuery) {
  jQuery('#banner-fade').bjqs({

有了这个:

jQuery(window).load(function() {
  $('#banner-fade').bjqs({