Question

在下面的html代码中，我刚创建了一个带有四个图像的轮播。在旋转木马的图像之前，我还有一个带有另一个图像的容器，我希望将其固定在旋转木马图像的顶部。

    <div class="container-fluid hero-slide">
        <div class="row">


            <div id="myCarousel" class="carousel slide" data-ride="carousel">

                  <!-- Indicators -->
                  <ol class="carousel-indicators">

                  <div class="container">
                    <div class="caption">
                     <img src="acacia-house-logo.png" alt="">
                   </div>
                 </div>

                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" >
                    <div class="item active">
                      <img src="slide2.jpg" id="item" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="slider-1.png" id="item" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="slider-2.png" id="item" alt="Flower">
                    </div>

                    <div class="item">
                      <img src="slider-3.png" id="item" alt="Flower">
                    </div>
                  </div>                  
            </div>
        </div>
    </div>

    .caption{
       margin:15%;
    }

如何玩图像以便最后我可以将它们放在左边？另一个问题是：图像现在位于旋转木马的中间，随着旋转木马图像的变化而移动。

它与以下网站显示基本相同 http://www.acaciahouse.co.za/

Answer 1

试试这个：

指示符按钮内有叠加层。将它移到旋转木马的顶部容器下面。

然后，您必须将叠加图像设置为position:absolute，以便它可以叠加幻灯片。稍微定位，使用z-index将叠加图像放在幻灯片的顶部，添加一点不透明度（透明度），瞧！ 请参阅底部的jsFiddle

＆＃13;

.carousel-inner img{width:94%;height:200px;}
.overpic{position:absolute;top:10%;left:20%;opacity:0.5;z-index:2;}
	.overpic img{width:250px;height:300px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid hero-slide">
	<div class="overpic">
	  <div class="caption">
		 <img src="http://placeimg.com/200/200/nature" alt="">
	  </div>
	</div>
  <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placekitten.com/300/200" id="item" alt="Chania">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Chania">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Flower">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Flower">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

由于某种原因，堆栈代码段未正确运行Bootstrap，因此请查看此jsFiddle：

jsFiddle example

回答你的问题：

（1）我如何玩图像，以便最后我可以将它们放在左边？

这是position:absolute和使用left:nn%和top:nn%的组合。请注意，测量值不必为百分比 - 您可以使用px，em，vh等。

（2）另一个问题是：图像现在位于旋转木马的中间，随着旋转木马图像的变化而移动。

position:absolute并且正确放置叠加图片div解决了这个问题

如何将图像放在旋转木马滑块的顶部

1 个答案: