0

我正在尝试使用http://www.aerowebstudio.net/codecanyon/jquery.slider/example_a_1.html创建一个 youtube 视频幻灯片

它工作正常，除非使用 json 动态附加

Json 部分工作正常并提供所需的输出

$(document).ready(function () {
$.ajax({
    url: 'http://localhost/?feed=true&json=true&callback=?',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl = "";
        var htmlcode = "";

        <!-- 
                    json parser code goes here

                -->            

          htmlcode +=  '<div><div class="caption"><a href="'+postUrl+'"><h4>'+posttitle+'</h4></div><img src="'+imageUrl+'" alt=""/></a> </div>';

            $(".slider").append(htmlcode);

    }
});
  });

json输出

<div class="slider">

<div> <!-- slide 1 -->
<div class="caption"><a href="http://localhost/exercitation-ullamco-laboris.html">
<h4>Exercitation ullamco laboris perspiciatis unde omnis iste voluptate</h4></a></div>

<a href="http://localhost/exercitation-ullamco-laboris.html">
<img alt="" src="http://img.youtube.com/vi/wOUgRif7JRc/0.jpg"></a>
</div>


<div> <!-- slide 2 -->
<div class="caption"><a href="http://localhost/lorem-ipsum-dolor-sit-amet-consectetur.html">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit incididing</h4></a></div>

<a href="http://localhost/lorem-ipsum-dolor-sit-amet-consectetur.html">
<img alt="" src="http://img.youtube.com/vi/K2ia36quNyo/0.jpg"></a>
</div>
</div>

和滑块功能

  jQuery(document).ready(function($) {
  $(".slider").slideshow({
    width      : 580,
    height     : 400,
    pauseOnHover : false,
    transition : 'SwipeLeft'
    //['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
  });

  $(".caption").fadeIn(500);

  // playing with events:

  $(".slider").bind("sliderChange", function(event, curSlide) {
    $(curSlide).children(".caption").hide();
  });

  $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
    $(curSlide).children(".caption").fadeIn(500);
  });
});

当输出被硬编码时，它可以工作，但是当通过 json 动态执行时，它会失败。似乎已经喜欢的 css 样式未应用于输出

有人请帮助我继续前进。谢谢

4

1 回答 1

1

将滑块函数包装在命名函数中：

function sliderIni(){
  $(".slider").slideshow({
    width      : 580,
    height     : 400,
    pauseOnHover : false,
    transition : 'SwipeLeft'
    //['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
  });

  $(".caption").fadeIn(500);

  // playing with events:

  $(".slider").bind("sliderChange", function(event, curSlide) {
    $(curSlide).children(".caption").hide();
  });

  $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
    $(curSlide).children(".caption").fadeIn(500);
  });
}

然后在你的 ajax 成功时调用它：

$.ajax({
    url: 'http://localhost/?feed=true&json=true&callback=?',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl = "";
        var htmlcode = "";

        <!-- 
                    json parser code goes here

                -->            

          htmlcode +=  '<div><div class="caption"><a href="'+postUrl+'"><h4>'+posttitle+'</h4></div><img src="'+imageUrl+'" alt=""/></a> </div>';

            $(".slider").append(htmlcode);
            sliderIni();

    }
});

确保sliderIni()在运行之前已定义。尝试在 AJAX 函数之前定义它或在外部失败$(document).ready

于 2013-05-05T21:38:16.663 回答