jquery - 基本jQuery slider (BJQS)不将样式应用于jQuery和XML生成的li元素

标签 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>


它从XML文件中的图像列表中读取,然后将其列出在BJQS的适当位置内。

然后我有了幻灯片容器:

<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元素,li元素是隐藏的部分,显示为在图像之间旋转。

我感觉这与创建lis之前调用BJQS的东西有关,但是我不会假装知道该怎么做。

任何帮助,将不胜感激。

最佳答案

解决了此问题,使用窗口加载http://api.jquery.com/load-event/代替了准备好使用bjqs参数修复此部分的文档。

所以我替换了这个:

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


有了这个:

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

关于jquery - 基本jQuery slider (BJQS)不将样式应用于jQuery和XML生成的li元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26470599/

相关文章:

html - 顶部横幅未在移动 View 中全宽呈现

javascript - 如何显示来自输入文件标签的文件路径?

javascript - 如何在 React 组件中修复列表样式计划的渲染

html - 垂直对齐无绝对定位

jquery - 根据子img高度改变父div高度,不超过父div max-width

javascript - 在单击 scrollTo 函数之前,如何让 div 占据全屏?

javascript - 使用下拉菜单添加/删除搜索框

javascript - TypeError:无法读取未定义的属性“fname”

html - 跨度在Bootstrap按钮上不起作用

javascript - XML 到 jQuery 到字符串?