添加淡化到我的身体背景滑块

I've created a background body slider which will switch through body backgrounds with 'next' and 'back' buttons. Live example here:

我已经创建了一个背景体滑块,它将通过“下一个”和“后退”按钮切换身体背景。这里的实例:

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

This functions perfectly (ignore the large images causing it to load slowly), but I can't seem to add a crossfade effect like on this website:

这完美地运行(忽略导致它加载缓慢的大图像),但我似乎无法在此网站上添加交叉渐变效果:

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

I tried this with CSS transition: all 0.5s ease-out but the transition is poor and loaded horribly.

我尝试使用CSS转换:所有0.5秒缓出但转换很差并且加载可怕。

Could anybody please advise where I can add a crossfade to this so that it's like the website above? Thank you for your help and time.

有人可以建议我可以在哪里添加交叉淡入淡出,这样它就像上面的网站?谢谢你的帮助和时间。

HTML & jQuery etc.

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;
}

4 个解决方案

#1

The trick is to use multiple elements, which are all positioned in the exact same place. All elements must have an opacity: 0, except the active one (opacity: 1).

诀窍是使用多个元素,这些元素都位于完全相同的位置。所有元素必须具有不透明度:0,除了活动元素(不透明度:1)。

When you navigate to the next/previous item, you need to toggle an active class on them, which removes/sets opacity: 1

当您导航到下一个/上一个项目时,您需要在它们上切换活动类,这将删除/设置不透明度:1

Simplified example with divs:

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>

#2

Try using

#Crossfade img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }

#Crossfade img {position:absolute;左:0; -webkit-transition:opacity 1s easy-in-out; -moz-transition:不透明度1s轻松进入; -o-transition:不透明度1s轻松进入;过渡:不透明度1s轻松进出; }

This should give you the crossfade that you want.

这应该会给你你想要的交叉淡入淡出。

#3

Instead of toggling classes you could just swap out the image, here's a quick proof of concept you can run in your console:

您可以只更换图像,而不是切换类,这里是您可以在控制台中运行的概念的快速证明:

jQuery("body").css({'background-image':'url(/media/import/backgrounds/background3.jpg)', 'transition':'all 0.5s ease-out'});

Adapting this for your code would look something like:

为您的代码调整它看起来像:

jQuery

jQuery(".next").click(function() {
    current++;
    if (current > max_backgrounds) {
        current = 1;
    }
    jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});
jQuery(".back").click(function() {
    current--;
    if (current < 1) {
        current = max_backgrounds
    }
    jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});

CSS

body { 
    transition: all 0.5s ease-out; 
}

#4

There many ways you can about this and this gentleman has showcase many of them

有很多方法可以解决这个问题,而这位绅士已经展示了很多这样的方法

Some pointers:

The page you've given as an example loads every image when the page loads. Performance wise, you don't want that. If you're going to do such an effect, make sure you load the images only when they actually required.

您作为示例给出的页面会在页面加载时加载每个图像。表现明智,你不希望如此。如果您要进行此类效果,请确保仅在实际需要时加载图像。

They achieve the effect by pilling all images on top of each other, then animating the opacity in/out when clicking the arrows. Since they all have position:absolute, you'll get the crossfade effect you wish for.

它们通过将所有图像放在彼此之上来实现效果,然后在单击箭头时设置不透明度的输入/输出。因为它们都具有位置:绝对,所以你将获得你想要的交叉渐变效果。