在幻灯片放映下显示图像

时间：2019-02-16 19:48:33

标签： css css-position relativelayout absolutelayout

我觉得很难解释，但是我在这里做了一个演示：

http://plnkr.co/edit/X0X4RAFjnUX7LzBL1R6p?p=preview

基本上，我有2列并排。当页面变小时，各列会互相向下。其中一列有一个滑块插件，用于更改图像。包装纸具有相对位置，因此可以更改尺寸。里面的图像使用滑块的绝对位置。

在这些图像下，我想要3个始终保留在下面的单独图像。不幸的是，我只能让它们出现在主图像上或图层下面（而不是在下面）。

这是完整的代码：

    var timer = setInterval(nextImage, 4000);
    var curImage = 0;
    var numImages = 3;

    function nextImage() {
      var e;
      // remove showMe class from current image
      e = document.getElementById("slideimg" + curImage);
      removeClass(e, "showMe");

      // compute next image
      curImage++;
      if (curImage > numImages - 1) {
        curImage = 0;
      }

      // add showMe class to next image
      e = document.getElementById("slideimg" + curImage);
      addClass(e, "showMe");
    }

    function addClass(elem, name) {
      var c = elem.className;
      if (c) c += " "; // if not blank, add a space separator
      c += name;
      elem.className = c;
    }

    function removeClass(elem, name) {
      var c = elem.className;
      elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks
    }
    body,
    html {
      height: 100%
    }

    body {
      min-height: 100%;
      background-position: center;
      background-size: cover;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      margin: 0;
    }

    #content {
      max-width: 1750px;
      margin-left: auto;
      margin-right: auto;
    }

    * {
      box-sizing: border-box;
    }
    /* Create two equal columns that floats next to each other */

    .column {
      float: left;
      width: 50%;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }
    /* Clear floats after the columns */

    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

    @media screen and (max-width: 900px) {
      .column {
        width: 100%;
      }
    }

    .homepage-main-img-wrapper {
      position: relative;
      right: 0;
      left: 0;
      margin: auto;
      height: 100%;
    }

    .homepage-main-img {
      width: 100%;
      border: 2px solid #194d98;
      outline: 2px solid #0c7d5f;
    }

    .slide {
      border: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
    }

    .showMe {
      opacity: 1;
    }
<html lang="et" xml:lang="et">
<body>
  <div id="container">
    <div id="content">
      <div class="row">
        <div class="column" style="background-color:#aaa;">
          <div>stuff</div>
        </div>
        <div class="column container2">
          <div class="homepage-main-img-wrapper">
            <img id="slideimg0" class="slide homepage-main-img showMe" src="https://i.imgur.com/n3oGBvR.jpg">
            <img id="slideimg1" class="slide homepage-main-img" src="https://i.imgur.com/Ak7Ykl8.jpg">
            <img id="slideimg2" class="slide homepage-main-img" src="https://i.imgur.com/tSmA8zP.jpg">
          </div>
          <div id="test" style="
    position: relative;
">
            <div id="instagram-feed" class="instagram_feed">
              <div class="instagram_gallery">
                <img src="https://i.imgur.com/aoaWgFY.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                <img src="https://i.imgur.com/41i7fue.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                <img src="https://i.imgur.com/ITSAyjN.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>


</body>

</html>

1 个答案:

答案 0 :(得分：1)

由于在调整浏览器大小时图像的高度会发生变化，因此您可以拍摄具有相同“ homepage-main-img”类的现有图像或透明图像，以便在调整浏览器大小时缩放比例相同。

我还从您的id测试div中删除了position：relative。

将HTML更改为HTML块中的以下内容。 JS和CSS保持不变。只是为了使代码片段正常工作而添加。

var timer = setInterval(nextImage, 4000);
    var curImage = 0;
    var numImages = 3;

    function nextImage() {
      var e;
      // remove showMe class from current image
      e = document.getElementById("slideimg" + curImage);
      removeClass(e, "showMe");

      // compute next image
      curImage++;
      if (curImage > numImages - 1) {
        curImage = 0;
      }

      // add showMe class to next image
      e = document.getElementById("slideimg" + curImage);
      addClass(e, "showMe");
    }

    function addClass(elem, name) {
      var c = elem.className;
      if (c) c += " "; // if not blank, add a space separator
      c += name;
      elem.className = c;
    }

    function removeClass(elem, name) {
      var c = elem.className;
      elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks
    }
 body,
    html {
      height: 100%
    }

    body {
      min-height: 100%;
      background-position: center;
      background-size: cover;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      margin: 0;
    }

    #content {
      max-width: 1750px;
      margin-left: auto;
      margin-right: auto;
    }

    * {
      box-sizing: border-box;
    }
    /* Create two equal columns that floats next to each other */

    .column {
      float: left;
      width: 50%;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }
    /* Clear floats after the columns */

    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

    @media screen and (max-width: 900px) {
      .column {
        width: 100%;
      }
    }

    .homepage-main-img-wrapper {
      position: relative;
      right: 0;
      left: 0;
      margin: auto;
      height: 100%;
    }

    .homepage-main-img {
      width: 100%;
      border: 2px solid #194d98;
      outline: 2px solid #0c7d5f;
    }

    .slide {
      border: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
    }

    .showMe {
      opacity: 1;
    }
<div id="container">
      <div id="content">
        <div class="row">
          <div class="column" style="background-color:#aaa;">
            <div>stuff</div>
          </div>
          <div class="column container2">
            <div class="homepage-main-img-wrapper">
              <img id="slideimg0" class="slide homepage-main-img showMe" src="https://i.imgur.com/n3oGBvR.jpg">
              <img id="slideimg1" class="slide homepage-main-img" src="https://i.imgur.com/Ak7Ykl8.jpg">
              <img id="slideimg2" class="slide homepage-main-img" src="https://i.imgur.com/tSmA8zP.jpg">
            </div>
            <div id="test"><img id="fakeslide" class="homepage-main-img" src="https://i.imgur.com/n3oGBvR.jpg">
              <div id="instagram-feed" class="instagram_feed">
                <div class="instagram_gallery">
                  <img src="https://i.imgur.com/aoaWgFY.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                  <img src="https://i.imgur.com/41i7fue.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                  <img src="https://i.imgur.com/ITSAyjN.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

相关问题
最新问题