Question

我正在项目中使用插件Jquery Vegas Slideshow，我正在尝试将数据直接从我的数据库加载到幻灯片显示脚本中。

我使用以下代码运行它：

<script type="text/javascript">
    jQuery.vegas('slideshow', {
        backgrounds:[
            { src:'images/slider/slider_01.jpg', fade:2500 },
            { src:'images/slider/slider_01.jpg', fade:2500 },
        ]
        })('overlay', {
        src:'images/slider/overlays/06.png'
    });
</script>

如何使用Ajax填充background参数？
我已经阅读了文档，但没有关于任何服务器端语言的信息。

Answer 1

通过检查github上的vegas插件的源代码，似乎没有任何方法可以在启动插件后动态更新背景图像。但由于有一种名为destroy的方法，我建议尝试使用下面的代码来破坏分配的背景和叠加层，并使用新的图像集重新初始化插件。

// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 }, 
{ src:'2.jpg', fade:1000 }, 
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }];

//destroy vegas object background
$.vegas.desroy('background');

//destroy vegas overlay background
$.vegas.desroy('overlay');

// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: bgimages
}) ('overlay');

Answer 2

试用此代码：

$('body').vegas({
   overlay: true,
   transition: 'fade', 
   transitionDuration: 4000,
   delay: 10000,
   color: 'red',
   animation: 'random',
   animationDuration: 20000,
   slides: [
      { src: 'img/2.jpg'},
      { src: 'img/3.jpg' },
      { src: 'img/4.jpg' },
      { src: 'img/5.jpg' }
   ]
});

将图像从数据库加载到Jquery Vegas幻灯片

2 个答案: