Question

最近我遇到了 vegas.js 插件不确定如何使用它...阅读文档但没有明确的想法。 http://vegas.jaysalvat.com/documentation/setup/ 相应的步骤，但没有显示图像。

  <script>
    $.vegas('slideshow', {
      backgrounds:[
        { src:'img/F1.jpg', fade:1000 },
        { src:'img/f2.jpeg', fade:1000 },

      ]
    })('overlay', {
      src:'/vegas/overlays/11.png'
    });
  </script>

Answer 1

您可以尝试使用firebug / inspector，单击控制台，然后粘贴正在进行的操作。那里会有错误。你也可以发布你如何包含文件？如果可能，请使用您的HTML发布。

Answer 2

正如你可以在numeric vector中看到覆盖属性进入维加斯函数。

$(document).ready(function() {
  var imagecollection = [{
      src: 'https://i.stack.imgur.com/oURrw.png'
    },
    {
      src: 'http://i.imgur.com/SZPjHwz.jpg'
    },
    {
      src: 'http://www.boyter.org/wp-content/uploads/2016/08/ChJzv9lUYAA9D5E.jpg'
    },
    {
      src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.jpg'
    }
    /* Slideshow not working? Check your image links. */
  ];

  $("#ShowSlideShowHere").vegas({
    slides: imagecollection,
    transition: 'fade',
    preloadImage: true,
    timer: true,
    shuffle: true,
    delay: 5000,
    animation: 'kenburns',
    cover: true,
    overlay: 'https://media.istockphoto.com/vectors/isolated-christmas-falling-snow-overlay-on-transparent-background-vector-id628152000'
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
</head>

<body>
  <div style="height:100vh">
    <div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
  </div>

vegas.js插件无法使用overlay

2 个答案: