-2

最近我遇到了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>
4

2 回答 2

0

Could you try using firebug/inspector, click on console, and paste in what is going on. There will be errors in there. Also could you post how you're including the file? Post with your html if possible.

于 2015-04-27T19:40:43.270 回答
0

正如您在设置部分中看到的那样，覆盖属性位于 vegas 函数内部。

$(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>

于 2018-03-15T16:08:46.543 回答