我试图在页面加载后更改kernburns slideshow,例如在按下按钮之后。动态更改jquery动画
这是http://jsfiddle.net/s4C5K/1/
HTML代码代码:
<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代码:
代码只需启动幻灯片。该功能slidechange()
清空div和改变“图像”变量和重做操作:
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");
}
});
};
它不无差错运行。
什么是您所遇到的错误? –
没有错误,按下按钮后只有div空了 – Appost