javascript - 添加淡入淡出到我的 body 背景 slider

Question

我创建了一个背景主体 slider ，它将使用“下一步”和“后退”按钮在主体背景之间切换。现场示例:

https://ts564737-container.zoeysite.com/lookbook

这个功能完美(忽略导致它加载缓慢的大图像)，但我似乎无法像在这个网站上添加交叉淡入淡出效果:

http://northamerica.triangl.com/pages/lookbook-swimwear

我用 CSS transition: all 0.5s ease-out 尝试过这个，但是过渡很差而且加载非常糟糕。

谁能告诉我在哪里可以添加交叉淡入淡出，这样它就像上面的网站一样？感谢您的帮助和时间。

HTML 和 jQuery 等

<!-- Remove header from lookbook page only and add background1 -->

<script>
jQuery(document).ready(function() {
    if (top.location.pathname === '/lookbook')
{
    jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
    jQuery("body").addClass("background1");
}
});
</script>

<!-- Change background -->

<script>
jQuery(document).ready(function() {
    var current = 1; // current background index
    var max_backgrounds = 3; // number of backgrounds it will work with any number
    jQuery(".next").click(function() {
        jQuery("body").removeClass("background" + current);
        // next background index or first one if it's the last one
        current++;
        if (current > max_backgrounds) {
            current = 1;
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
    jQuery(".back").click(function() {
        jQuery("body").removeClass("background" + current);
        // previous background index or last one if current is the first one
        current--;
        if (current < 1) {
            current = max_backgrounds
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
});
</script>

<!-- Container plus images -->

<div id="toggle" width="100%">
<img src="/media/import/icons/back.png" class="back">
<img src="/media/import/icons/next.png" class="next">
</div>

CSS

/* Body background options */

.background1 {
    background: url('/media/import/backgrounds/background1.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

.background2 {
    background: url('/media/import/backgrounds/background2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

.background3 {
    background: url('/media/import/backgrounds/background3.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

/* Toggle Buttons */

#toggle .next {
    float: right;
    margin-right: 20px !important;
}

#toggle .back {
    margin-left: 20px !important;
}

#toggle img {
    margin-top: 400px;
    display: inline;
}

#toggle img:hover {
    cursor: pointer;
    opacity: 0.8;
}

Answer 1

诀窍是使用多个元素，它们都位于完全相同的位置。所有元素都必须具有 opacity: 0，事件元素除外 (opacity: 1)。

当您导航到下一个/上一个元素时，您需要在它们上切换一个事件类，这会删除/设置 opacity: 1

使用 div 的简化示例:

(function () {

        var prevButton = $('.previous'),
            nextButton = $('.next'),
            allImages = $('.background-images li');

        nextButton.click(function(e) {

            // Find the active element
            activeElement = $('li.bg-active');
            // remove the 'bg-active'-class from this element
            activeElement.removeClass('bg-active');

            // if current element is the last one, make sure to add 'bg-active'-class to the very first element.
            if (activeElement[0] === allImages.last()[0]){
                allImages.first().addClass('bg-active');
            } else {
                // Add 'bg-active'-class to the next element
                activeElement.next().addClass('bg-active');
            }

        });

        prevButton.click(function(e) {

            activeElement = $('li.bg-active');
            activeElement.removeClass('bg-active');

            // if current element is the first one, make sure to add 'bg-active'-class to the very lst element.
            if (activeElement[0] === allImages.first()[0]){
                allImages.last().addClass('bg-active');
            } else {
                // add 'bg-active'-class to the previous element
                activeElement.prev().addClass('bg-active');
            }
        });



    })();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        ul {
            overflow: auto;
        }
        li {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
        }
        .bg {
            opacity: 0;
            transition: all 0.5s ease-out;
        }
        .bg-active {
            opacity: 1;
        }
        .bg1 {
            background-color: red;
        }

        .bg2 {
            background-color: green;
        }

        .bg3 {
            background-color: blue;
        }
    </style>
</head>
<body>

<a href="#" class="previous">previous</a>
<a href="#" class="next">next</a>

<ul class="background-images">
    <li class="bg bg1 bg-active"></li>
    <li class="bg bg2"></li>
    <li class="bg bg3"></li>
</ul>
</body>
</html>