1

我很难弄清楚如何做我想做的事，所以我想我会解释我想要什么，并提供说明我的问题的代码笔。

我想要的是：

一个轮播，有各种幻灯片，夹在中间的静态图像上。考虑 3 层——1 层是背景，2 层是中间的人（模型），3 层是前景元素。我希望幻灯片包含 bg 和 fg，但模型保持静止。随着幻灯片的移动，它基本上只改变了背景和前景元素。

问题：

因为我不精通 z-index 层次结构，所以我不确定如何完成我想要的。因为滑块需要我将第二层分解为父元素，所以它不会在幻灯片之间进行动画处理，所以当幻灯片出现时，它们会根据它们的容器进行分层，但它们仍然位于模型后面。我一生都无法弄清楚如何在每张幻灯片的元素之间放置模型。

这个例子：

https://codepen.io/jrhager84/pen/wrvErb

编码：

HTML

<div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <img id="model" class="index-2" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer">
            <div class="carousel-item active">
                <img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer">
                <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100 index-1" src="http://res.cloudinary.com/jrhager84/image/upload/v1505338843/SantaWindow_1_xeaojc.jpg" alt="Second slide">
                <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338864/SantaWindow_2_rvskzc.png" alt="Second slide top layer">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338831/Mario_1_doib9k.jpg" alt="Third slide">
                <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338829/Mario_2_gp2fhj.png" alt="Third slide top layer">
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

CSS

.carousel {
    background-color: #efefef;
}

.index-1 {
    z-index: 1 !important;
}

.index-2 {
    z-index: 2 !important;
}

.index-3 {
    z-index: 300 !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#model {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

提前感谢您的帮助，如果有什么我可以添加到这将有助于促进答案，请告诉我。^_^

4

1 回答 1

1

好的-对于那些将来可能会发现的人，我想通了。我不得不使用我的后备（并没有我想象的那么糟糕）。我制作了 2 个滑块，并将 fg 滑块嵌套到内部 div 之后的第一个滑块中。然后我删除了 data-* HTML 事件，并通过缓存一个 var 来手动调用幻灯片，该 var 在 doc 上准备好了一个多 jQuery 选择器。然后，我使用 fg 层上的控件添加 jQuery 事件，这些事件使用 prev 和 next 箭头控制两个滑块。

代码在这里： https ://codepen.io/jrhager84/pen/NaPpKO

HTML

<!-- The page ontainer -->
<div class="container">

    <!-- The bg slider container -->
    <div id="carousel-bg-layer" class="carousel-bg slide">

        <!-- The Main Carousel inner container -->
        <div class="carousel-inner">

            <!-- The Model image sibling to containers -->
            <img id="model" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer">

            <!-- The actual slides -->
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://res.cloudinary.com/jrhager84/image/upload/v1505338843/SantaWindow_1_xeaojc.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338831/Mario_1_doib9k.jpg" alt="Third slide">
            </div>

        </div> <!-- eof main container inner -->

            <!-- The sub carousel outer wrapper -->
            <div id="carousel-fg-layer" class="carousel-fg slide">

                <!-- The sub carousel inner container -->
                <div class="carousel-inner">

                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338864/SantaWindow_2_rvskzc.png" alt="Second slide top layer">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338829/Mario_2_gp2fhj.png" alt="Third slide top layer">
                    </div>

                </div> <!-- eof 2nd carousel container inner -->

                <!-- Next & Prev links for containers -->
                <a class="carousel-control-prev carousel-control" href="#" role="button">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next carousel-control" href="#" role="button">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
        </div> <!-- eof 2nd container outer -->
    </div> <!-- eof 1st container outer -->


</div> <!-- eof page container -->

CSS

.carousel-bg {
    position: relative;
}

#model {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.carousel-fg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
}

JavaScript (jQuery)

$(document).ready(function() {
   // Init cache sliders to one variable
   var $carousel = $('.carousel-bg, .carousel-fg');

   // Init cache prev and next controls
   var $prev = $('.carousel-control-prev');
   var $next = $('.carousel-control-next');

   // Invoke slider animation on page load
   $carousel.carousel({
       interval: 4000,
       pause: 'hover'
   });

   // Listen for clicks on 'prev' and 'next' controls
   $prev.on('click', function()
   {
       $carousel.carousel('prev');
   });
   $next.on('click', function()
    {
        $carousel.carousel('next');
    });
   $next.on('click', carousel('next'));
});
于 2017-09-14T10:27:24.903 回答