css 推子 - 淡入/淡出图像展示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 推子 - 淡入/淡出图像展示相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<div id="fader">
    <div class="fader-img" style="background: url('img_1.jpg') no-repeat center center / cover;"></div>
    <div class="fader-img" style="background: url('img_2.jpg') no-repeat center center / cover;"></div>
    <div class="fader-img" style="background: url('img_3.jpg') no-repeat center center / cover;"></div>
</div>
<script src="fader.js"></script>
</body>
</html>
/**
 * Created by willsquire on 13/10/15.
 */

var fader_imgs = $('.fader-img');
var fade_speed = 1000;
var fade_delay = 5000;

// Only fade between images if there is more than one
if (fader_imgs.length > 1) {
    var img_index = 0;
    var z_index_show = 1;
    var z_index_hide = 0;
    fader_imgs.each(function(index, element) {
        element.style.opacity = 0;
        element.style.display = 'none';
        element.style.zIndex = z_index_hide;
    });
    _fade_in(fader_imgs[img_index]);

    function _fade_out(img) {
        $(img).fadeTo(fade_speed, 0, function() {
            img.style.display = 'none';
            img.style.zIndex = z_index_hide;
        });
    }

    function _fade_in(img) {
        img.style.zIndex = z_index_show;
        img.style.display = 'block';
        $(img).fadeTo(fade_speed, 1);
    }

    function _next_img() {
        // Remove image
        _fade_out(fader_imgs[img_index]);

        img_index++;

        if (img_index == fader_imgs.length)
            img_index = 0;

        // Add image
        _fade_in(fader_imgs[img_index]);
    }

    setInterval(_next_img, fade_delay);
}
#fader {
    width: 100%;
    height: 500px;
}

.fader-img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

以上是关于css 推子 - 淡入/淡出图像展示的主要内容，如果未能解决你的问题，请参考以下文章

为啥这个 CSS @keyframes 规则不交叉淡入淡出？

react, css) 淡入淡出的过渡 css，当背景图像用 className 改变时

css 悬停时淡入/淡出图像标题。

如何使用 CSS 3 过渡创建循环淡入/淡出图像效果？

CSS3 - 在精灵图像的“背景位置”之间淡入淡出

CSS3 淡出/淡入文本和图像从和到透明