Question

所以我基本上找到a really cool example来使用JavaScript和jQuery循环背景图像。

为每张幻灯片添加叠加文字说明效果的最佳方法是什么？

因此，例如，每张幻灯片也会在每张图片的某处覆盖文字说明，并附有自己的风格。是否有可能让这个文本也带有它自己的效果。因此图像淡入，然后文本描述从左侧滑入，依此类推

HTML

<body>

    <div id="background_cycler">

        <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg/1920px-View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg" width="1000px" height="1000px" alt="" />

        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Amanhecer_no_Hercules_--.jpg/1920px-Amanhecer_no_Hercules_--.jpg" alt="" width="1000px" height="1000px" />

        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Giant_Manta_AdF.jpg/1920px-Giant_Manta_AdF.jpg" alt="" width="1000px" height="1000px" />
    </div>

JQUERY

$('#background_cycler').hide();

window.cycleImages = function() {
    var $active = $('#background_cycler .active');
    var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
    $next.css('z-index', 2); //move the next image up the pile
    $active.fadeOut(1500, function() { //fade out the top image
        $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active'); //make the next image the top one
    });
}

$(window).load(function() {


    $('#background_cycler').fadeIn(1500); //fade the background back in once all the images are loaded
    // run every 7s
    setInterval('cycleImages()', 7000);
})

CSS

#background_cycler {
    padding: 0;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#background_cycler img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

#background_cycler img.active {
    z-index: 3;
}

Answer 1

您可以使用更通用的img标记作为幻灯片，而不是使用div标记。然后你可以用你想要的任何内容填充它们，看看这个例子：

https://jsfiddle.net/00gow9Lt/1/

在这里，我使用了div个标签，其中包含一些简单的文字和原始图像作为背景。

您可以使用css分别设置每个内容的样式以获得不同的外观，但是对文本本身具有滑动效果则需要更多的代码。为此，我建议更详细地阅读jQuery动画。

Answer 2

这是像安迪这样的解决方案，但保留img代码：

https://jsfiddle.net/2y8fo13d/

循环背景与文本覆盖效果

2 个答案: