1

我正在使用 SoundCloud API使用我在此处找到的说明ul将艺术品作为通过 Javascript加载到 HTML 文档中，然后使用Flexslider 滑过封面的轮播（包装在标签中）。当列表项被硬编码到 HTML 文档中时，这可以正常工作，但是，当我使用加载脚本从 API 动态检索艺术品并将它们注入 DOM 时，Flexslider 不会注册它们是尽管在 SoundCloud 脚本之后加载了 Flexslider 脚本，但在那里并为 s 添加了必要的样式。谁能告诉我如何让 Flexslider 拾取动态内容？这是我的文件：liimgli

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-custom-player.js

与此处找到的文件相同


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

});

需要帮助请叫我。提前致谢。

4

3 回答 3

4

可能是您需要稍微延迟才能让数据首先完全加载？使用 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();

});
于 2013-01-02T19:49:37.403 回答
1

目前你已经在函数中编写了flexslider代码$(document).ready

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

$('.sc-stream').flexslider({
    namespace:  "sc-",
    animation:  "slide",
    selector:   ".cover-flow > li",
    slideshow:  false,
    controlNav: false,
    minItems:   1,
    itemWidth:  224,
    itemMargin: 8
});
于 2013-01-01T13:17:35.757 回答
0

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

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
  });
}
于 2013-06-18T21:28:31.020 回答