Question

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

除非使用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样式不适用于输出

有人请帮我搬家。感谢

Answer 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

之外失败

Jquery幻灯片使用动态json输出无法正常工作

1 个答案: