Question

我有一个自助网站，幻灯片中有3张照片。这样做的功能是：

$(function () {
    $.vegas('slideshow', {
        backgrounds: [{
            src: 'img/ph1.jpg', fade: 0, delay: 5000, //fade: 1000, delay: 9000,
        }, {
            src: 'img/ph2.jpg', fade: 0, delay: 5000,
        }, {
            src: 'img/ph3.jpg', fade: 0, delay: 5000,
        },]
    })('overlay', {});
});

我想要做的是为每张照片关联文字。例如：ph1.jpg包含“text1”，ph2.jpg包含“text2”，依此类推。

我尝试在HTML中添加轮播，但文本和照片不同步（即使它们具有相同的延迟）。我还尝试修改this JS，以便能够在上面的函数中添加一些文本。

如何让他们同步照片和文字？

Answer 1

您可以尝试下面依赖vegaswalk事件回调的代码。

每当Vegas更改幻灯片时，都会触发

vegaswalk事件。它可以如下使用：

var textArray = [
    "text1 for ph1.jpg",
    "text2 for ph2.jpg",
    "text3 for ph3.jpg"
];

$("body").on('vegaswalk', function (e, index, slideSettings) {
    var currentText = textArray[index];
    alert(currentText);
    //write here code to set this text in some div present on Page
    //OR
    //write code to move the slide of text carousel as per current index of slideshow
});

Answer 2

最好将图像放在css文件中，然后从那里将文本放在一起。

如何在bootstrap中同步文本和照片？

2 个答案: