Question

我正在使用SoundCloud API通过Javascript将图稿作为ul加载到HTML文档中，使用instructions I found here，然后滑过封面的转盘（包含在li标签中）使用Flexslider。当列表项硬编码到HTML文档中时，这很好用，但是，当我使用加载脚本从API动态检索作为img的图稿并将其注入DOM时，Flexslider会尽管在SoundCloud脚本之后加载了Flexslider脚本，但不要注册它们在那里并为li添加必要的样式。任何人都可以告诉我如何使Flexslider获得动态内容吗？这是我的文件：

HTML（代码段）

<div class="page-container">
    <section id="work">
        <h3>Work</h3>
        <p>Check out my latest mixes below.</p>
        <div class="sc-stream">
            <ul class="cover-flow clearfix">
                <!-- Covers inject here -->
            </ul>
        </div>
    </section>
    <hr>
</div><!-- End page-container -->

<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>

<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>

SC-定制player.js

与file found here

相同

main.js

$(document).ready(function() {

    $('.sc-stream').flexslider({
        namespace:  "sc-",
        animation:  "slide",
        selector:   ".cover-flow > li",
        slideshow:  false,
        controlNav: false,
        minItems:   1,
        itemWidth:  224,
        itemMargin: 8
    });

});

如果您还有其他需要，请告诉我。提前谢谢。

Answer 1

您可能需要稍微延迟才能让数据先完全加载？使用setTimeout处理我当前的项目：

HTML

<div class="flexslider">
    <ul class="slides"></ul>
</div>

JS

$(function () {

function initGame() {
    // load xml data file (from same domain)
    // iterate xml elements and load <li>s into HTML variable

    $(HTML).appendTo('.slides');

    setTimeout(function () {
        startGame();
    }, 500);
}

function startGame() {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        randomize: true,
        directionNav: false,
        touch: true,
        after: function (slider) {
            $(".flex-control-nav li").removeClass("active");
            $(".flex-active").parent().addClass("active");
        },
        itemMargin: 5
    });
}

initGame();

});

Answer 2

目前，您已在flexslider函数

中编写了$(document).ready代码

动态加载内容后，您必须编写以下代码

$('.sc-stream').flexslider({
    namespace:  "sc-",
    animation:  "slide",
    selector:   ".cover-flow > li",
    slideshow:  false,
    controlNav: false,
    minItems:   1,
    itemWidth:  224,
    itemMargin: 8
});

Answer 3

这是一个可能的解决方案。

function CreateBrandsGallery() {
  $.getJSON("services/products/read.php?req=brands", function(data) {
    $.each(data.product_brand, function(i,data) {
      var box = "<li class='add-bord-left'>";
      box += "<div class='brand_carousel_box_img remove-over add-bord-radius fl_left'><a class='item_detail_box' href='products.php?req=allproducts&art="+data.brand_id+"'>";
      box += "<img src='"+data.brand_preview+"' />";
      box += "</a></div>";
      box += "</li>"
      $(box).appendTo('div.brands_gallery ul');
      setTimeout(function () { ProductSBrandsGallerySlider(); }, 500);
    });
  });   
}

另一个功能：

function ProductSBrandsGallerySlider() {
  $('.brands_gallery,.products_new_gallery').flexslider({
    animation: "slide",
    animationLoop: true,
    reverse: false,
    slideshowSpeed: 7000,
    animationSpeed: 500, 
    itemWidth: 233,
    itemMargin: 0,
    minItems: 4,
    maxItems: 4,
    randomize: true,
    pauseOnHover: true,
    initDelay: 300
  });
}

Flexslider无法识别动态加载的内容？

HTML（代码段）

SC-定制player.js

main.js

3 个答案: