Question

我正在使用vegas.js插件（http://vegas.jaysalvat.com/documentation）对于我的网站。我想用这些图像显示一些文本。如何添加一些带图像的动画文本。

在身体中初始化vegas.js：

<script>
    $("#fullScreenSlide").vegas({
        preload : true,/*load then show image*/
        autoplay: true,
        loop: true,
        shuffle: false,
        cover: true,
        transition: 'fade', /*animation-effect*/
        transitionDuration: 5000, /*animation duration*/
        delay: 12000, /*slide duration*/

    slides: [
      { src: "images/1.jpg" },
      { src: "images/2.jpg" },
      { src: "images/3.jpg" },
      { src: "images/4.jpg" }
    ],
        overlay: 'vegas/overlays/01.png' /*overlay background*/
    });
    </script>

Answer 1

我自己解决了这个问题我的解决方案是：

vegas.js - Add "overlaytext = this._options('overlaytext')," on row 344<br />
vegas.js - Edit row 450 "$inner = $('<div class="vegas-slide-inner"></div>')" to the following "$inner = $('<div class="vegas-slide-inner">' + overlaytext + '</div>')"

您的脚本应更改为：

<script>
    $(".right-container").vegas({
       slides: [
           { src: "/img/slider1.jpg", overlaytext: "text 1" },
           { src: "/img/slider1.jpg", overlaytext: "text 2" }
       ]
    });
</script>

这是为了获得每张图片的一些文字，然后你需要根据自己的需要设计样式。

Answer 2

而不是编辑vegas.js或vegas.min.js依赖项文件：

向幻灯片添加其他参数，例如text或overlayText，如下所示：

{ src: "/images/1.jpg", text: "Text for slider 1." },
{ src: "/images/2.jpg", text: "Text for slider 2." }

确保您创建的元素具有可识别的id或class，例如：

<div id="vegasSliderInner"></div>

现在只需向滑块添加walk函数参数，该参数具有html追加功能。

（完整代码）：

<script>
    $("#fullScreenSlider").vegas({
        preload : true,/*load then show image*/
        autoplay: true,
        loop: true,
        shuffle: false,
        cover: true,
        transition: 'fade', /*animation-effect*/
        transitionDuration: 5000, /*animation duration*/
        delay: 12000, /*slide duration*/
        overlay: 'vegas/overlays/01.png' /*overlay background*/

        slides: [
            { src: "/images/1.jpg", text: "Text for slider 1." },
            { src: "/images/2.jpg", text: "Text for slider 2." },
            { src: "/images/3.jpg", text: "Text for slider 3." },
            { src: "/images/4.jpg", text: "Text for slider 4." }
        ],

        walk: function (index, slideSettings) {
            $('#vegasSliderInner').html(slideSettings.text);
        }
    });
</script>

如何使用vegas.js插件添加文本动画

2 个答案: