javascript - 无法运行 Vegas jQuery 插件

标签 javascript jquery jquery-plugins

我期待使用 Vegas jQuery 插件向 DOM 元素添加幻灯片。我写了一些简单的代码来测试它,但它似乎无法运行。谁能告诉我我做错了什么?我尝试了几种变体,甚至查看了同一问题的现有答案 here但似乎也不起作用。

    $(function() {
        $.vegas('body', {
          backgrounds:[
          { src:'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg'},
          { src:'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg'}
          ]
        })
      });
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.2.0/vegas.min.css" rel="stylesheet"/>
</head>

<body>
<h1> Hello world </h1>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.2.0/vegas.min.js"></script>
</body>

最佳答案

您应该在 jQuery 所选项目上调用“vegas”,因此您的代码应如下所示:

$(function() {
  console.log($.fn.vegas)
  $('body').vegas({
    slides:[
      {src:'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg'},
      {src:'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg'}
    ]
  })
});

正如网站所解释的:http://vegas.jaysalvat.com/documentation/setup/

关于javascript - 无法运行 Vegas jQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36784598/

相关文章:

javascript - 如何将函数变成 jQuery 插件

javascript - 在 html 页面上动态显示特定的 div

javascript - 将事件与参数一起传递给函数

javascript - getElementById(...) 为空。在 Firebug 中工作正常

JQuery 向下滑动而不是拉下所有包含的内容

jquery - 退格键触发事件,但删除键不触发事件

javascript - 替换 document.getElementById ("demoID").style.color = "blue"是否安全?与 demoID.style.color = "blue";

javascript - 执行后删除自身的 javascript/jquery 函数

javascript - jqtree无法使用loadDataFromUrl函数加载数据

php - 是否有任何插件可以将缩略图等图像扩展到一些大尺寸?