jquery - jquery change div content on time interval

Question

Have a look at this pic: You can see a Quote block under the image slider (it's nivo slider if it's useful). I have to change the sentence in the quote block every time the image changes. I thoungh that was impossible, but just thinking a bit pheraphs I can set an interval with setInterval() to the quote block and set the time in a way that fit the slider time.

I don't really know how to do it I think I have to set an array of sentence that are display in html at a specific time... Oh and I need a fade effect but I don't think it is a problem...

Thanks a lot in advace

Answer 1

我认为您可以使用 Nivo Slider 的内置字幕功能来实现您的目标。您可以根据需要设置标题元素的样式。

"要为图像添加标题，您只需向图像添加标题属性。要添加 HTML 标题，只需将标题属性设置为包含标题的元素的 ID（以哈希为前缀）。请注意，包含标题的 HTML 元素必须应用 CSS 类 nivo-html-caption 并且必须在滑块 div 之外。 "

http://dev7studios.com/nivo-slider/#/documentation

如果不适合，请使用 afterChange 函数更新您的标题元素：

$('#slider').nivoSlider({
    afterChange: function() {
        // Do your caption update here.
    }
});

Answer 2

为什么不使用Cycle 插件，听起来就像您正在寻找的那样。插件提供了一种称为循环的方法，该方法在容器元素上调用。容器的每个子元素都成为一个“幻灯片”。选项控制幻灯片转换的方式和时间。

这是一个示例演示

$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});