Question

我想每隔5秒左右更改一次div的背景图片和内容，就像旋转的横幅一样，使用jquery。

将会有一个图像网址列表和一个文本列表，每个文本列表都会按照它们的顺序淡入/淡出并继续循环。

我已经为某人设置了文档以引导我。所有帮助非常感谢。谢谢

<div class="banner">
    <div class="titles">
        <p>Title1</p>
        <p>Title2</p>
        <p>Title3</p>
    </div>
</div>

Answer 1

如果我理解正确

var imgs = ['http://www.google.com/logos/1998/googleburn.jpg', 'http://www.google.com/logos/1998/googlebeta.jpg', 'http://www.google.com/logos/1999/googlepump.gif'],
    i = 0;

setInterval(function () {
    $('.banner').fadeOut(300, function () {
        $(this).css('background-image', 'url(' + imgs[i] + ')').find('p:eq(' + i + ')').show().siblings().hide()
            .end().end().fadeIn(300, function () {
            i++;
            if (i === imgs.length) {
                i = 0
            }
        });
    });
}, 5000)

FIDDLE

更改背景图像和文本，旋转横幅样式

1 个答案: