Question

我正在尝试在页面加载后更改kernburns slideshow，例如在按下按钮之后。

的代码

HTML CODE：

<div id="kenburns-slideshow"></div>
<div id="kenburns-description">
    <h1 id="status">Loading Images..</h1>
    <h1 id="slide-title"></h1>
    <h1 class="title"><a href="http://www.github.com/toymakerlabs/kenburns/" target="blank">Kenburns.js
    </a></h1>
    <p>Kenburns.js is a lightweight and flexible Jquery gallery plugin that loads images and features an animated, pan-and-zoom, Ken Burns style effect. Grab the source from my <a href="http://www.github.com/toymakerlabs/kenburns/" target="blank"> Github</a></p>
</div>
<button onclick="slidechange()">New slide</button>

JS CODE：

代码只是启动幻灯片。函数slidechange()清空div并更改“images”变量并重做操作：

var titles = ["Epic Day at Refugio",
          "Colors of Spring",
          "First Flowers",
          "Magic Hour at Sands Beach",
          "Coal Oil Point",
          "Hope Ranch Views"];

$(document).ready(function() {
$('#kenburns-slideshow').Kenburns({
    images: [
                    "http://www.toymakerlabs.com/kenburns/images/image0.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image1.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image2.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image3.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image4.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image5.jpg"            ],
        scale:0.75,
        duration:8000,
        fadeSpeed:1200,
        ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)',

        onSlideComplete: function(){
            $('#slide-title').html(titles[this.getSlideIndex()]);
        },
        onLoadingComplete: function(){
            $('#status').html("Loading Complete");
        }

    });
});

    function slidechange() {
    $('#kenburns-slideshow').empty();    
    $('#kenburns-slideshow').Kenburns({
        images: [
                    "http://static2.wikia.nocookie.net/__cb20070903093660/nonciclopedia/images/thumb/c/cf/Fini.jpg/200px-Fini.jpg",
            "http://www.caffettieragiornaliera.it/wp-content/gallery/signor-boh/boh-facebook.gif",
            "http://www.lanostratv.it/wp-content/uploads/2013/01/rai-boh-flop-facchinetti.jpg",
                    ],
        scale:0.75,
        duration:8000,
        fadeSpeed:1200,
        ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)',

        onSlideComplete: function(){
            $('#slide-title').html(titles[this.getSlideIndex()]);
        },
        onLoadingComplete: function(){
            $('#status').html("Loading Complete");
        }

    });
    };

没有错误就无法正常工作。

Answer 1

<div id="kenburns-slideshow"><div id='foo'></div></div>

在里面插入新的div。留下他的父母作为占位符。然后点击按钮完整删除旧div。

$('#foo').remove();

然后创建相同的元素并将Kenburns库附加到它。

$("<div></div>").attr("id","foo").appendTo("#kenburns-slideshow").Kenburns({});

（在示例中使用您的设置）

Answer 2

正如马吕斯写道：

var titles = ["Epic Day at Refugio",
          "Colors of Spring",
          "First Flowers",
          "Magic Hour at Sands Beach",
          "Coal Oil Point",
          "Hope Ranch Views"];

$(document).ready(function() {
  $("<div></div>").attr("id","newdiv").appendTo("#kenburns-slideshow").Kenburns({
        images: [
            "http://www.toymakerlabs.com/kenburns/images/image0.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image1.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image2.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image3.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image4.jpg",
            "http://www.toymakerlabs.com/kenburns/images/image5.jpg"            ],
        scale:0.75,
        duration:8000,
        fadeSpeed:1200,
        ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)',

        onSlideComplete: function(){
            $('#slide-title').html(titles[this.getSlideIndex()]);
        },
        onLoadingComplete: function(){
            $('#status').html("Loading Complete");
        }

    });
 $('#mybutton').click(slidechange);
    function slidechange() {
    $('#kenburns-slideshow #newdiv').remove();
    $("<div></div>").attr("id","newdiv").appendTo("#kenburns-slideshow").Kenburns({
        images: [
                    "http://static2.wikia.nocookie.net/__cb20070903093660/nonciclopedia/images/thumb/c/cf/Fini.jpg/200px-Fini.jpg",
            "http://www.caffettieragiornaliera.it/wp-content/gallery/signor-boh/boh-facebook.gif",
            "http://www.lanostratv.it/wp-content/uploads/2013/01/rai-boh-flop-facchinetti.jpg",
                    ],
        scale:0.75,
        duration:8000,
        fadeSpeed:1200,
        ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)',

        onSlideComplete: function(){
            $('#slide-title').html(titles[this.getSlideIndex()]);
        },
        onLoadingComplete: function(){
            $('#status').html("Loading Complete");
        }

    });
    };

});

请参阅上面的解决方案：http://jsfiddle.net/s4C5K/3/

动态更改Jquery动画

2 个答案: