Ken Burns 幻灯片修改

Question

我在 Codepen 上找到了一个幻灯片，如下所示：https://codepen.io/wh1zk1d/pen/WRJjLd

我喜欢这个，但我只是想要带有 Ken Burns 效果的图像，所以我简化了代码：

这段代码的美妙之处在于它非常简单:-)

    #slides {
        background: #000;
        height: 450px;
        overflow: hidden;
        width: 100%;
    }

    #slides div {
        animation: ken-burns 3s ease-out;
        animation-fill-mode: both;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
    }

    @keyframes ken-burns {
        from {
            transform: scale(1.2);
        } to {
            transform: scale(1);
        }
    }

    <div id="slides">
        <div style="background-image: url('https://images.unsplash.com/photo-1491609154219-ffd3ffafd992?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')"></div>
    </div>

我在我正在创建的网站的所有内页上都使用了此功能，但我想在主页上做的是使用相同的概念，并进行一些修改，以创建多图像(4) 幻灯片...

它现在的工作方式是加载一张图像，然后在动画完成时停止。这对内页很有效，但在主页上，如果它在无限连续循环中循环就好了。

我尝试添加另一个具有不同背景图像的 div，但代码仍然以相同的方式工作。在第一个 div 加载图像，然后停止。

我很确定这是一个简单的调整，但有人可以帮我调整我已经使用的东西来让多个图像 (4) 工作，以及这些图像的无限连续循环吗？

谢谢，
乔什

Answer 1

所以，我找到了一些 JS 来帮助我完成这项工作:-)

CSS 有一些小的调整...

#slides {
    background: #000;
    height: 450px;
    overflow: hidden;
    width: 100%;
}

#slides div.current {
    animation: ken-burns 3s forwards;
    animation-fill-mode: both;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

@keyframes ken-burns {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

HTML 看起来也有点不同...

<div id="slides">
    <div class="ini" data-imagenum="1" style="background-image: url('https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -1"></div>
    <div class="" data-imagenum="2" style="background-image: url('https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=80'); z-index: -2"></div>
     <div class="" data-imagenum="3" style="background-image: url('https://images.unsplash.com/photo-1486365227551-f3f90034a57c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -3"></div>
    <div class="" data-imagenum="4" style="background-image: url('https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80'); z-index: -4"></div>
</div>

然后我加了一些JS...

$(document).ready(function () {
    if ($('#slides div').length){
        $('.ini').addClass('current');
        var numImages = $('#slides div').length;
        var i = 1;
                
        $('body').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', '.current', function() {
            i ++;
            $('.current').removeClass('current');
            if ( i <= numImages ) {
                $('*[data-imagenum="' + i +'"]').addClass('current');
            } else {
                i = 1;
                $('*[data-imagenum="' + i +'"]').addClass('current');
            }
        });
    }
});

这是我能得到的最接近原始代码的代码！

这是代码笔：https://codepen.io/joshrodgers/pen/ZEQjZNr

Ken Burns 幻灯片修改

Ken Burns Slideshow Modification

html

css

tweak

slideshow

effect