Question

我已经创建了一个背景主体滑块，可以通过＆＃39; next＆＃39;来切换身体背景。和＆＃39;回来＆＃39;纽扣。这里的实例：

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

此功能完美（忽略导致其缓慢加载的大图像），但我似乎无法在此网站上添加交叉渐变效果：

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

我尝试使用CSS transition: all 0.5s ease-out，但过渡很差，而且加载很可怕。

有人可以建议我可以在哪里添加交叉淡入淡出，以便它像上面的网站一样吗？感谢您的帮助和时间。

HTML＆amp; 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

尝试使用

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

这可以为您提供所需的交叉渐变。

Answer 2

不是切换类，而是可以换掉图像，这里是您可以在控制台中运行的概念的快速证明：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "events.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

为您的代码调整此内容将类似于：

<强>的jQuery

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

<强> CSS

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

Answer 3

有很多方法可以解决这个问题以及this gentleman has showcase many of them

一些指示：

您作为示例提供的页面会在页面加载时加载每个图像。表现明智，你不想要那样。如果您要进行此类效果，请确保仅在实际需要时加载图像。

它们通过将所有图像相互叠加来实现效果，然后在单击箭头时设置不透明度。由于它们都有position:absolute，因此您可以获得所需的交叉渐变效果。

Answer 4

诀窍是使用多个元素，这些元素都位于完全相同的位置。除活跃元素（opacity: 0）外，所有元素都必须为opacity: 1。

当您导航到下一个/上一个项目时，您需要切换它们上的活动类，这会删除/设置opacity: 1

div的简化示例：

＆＃13;

(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');
            }
        });



    })();

＆＃13;

<!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>

＆＃13;

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

4 个答案: