在幻灯片下显示图像

问题描述 投票：0回答：1

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

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>
css css-position relativelayout absolutelayout
1个回答
1
投票

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

我还删除了位置：相对于你的id测试div。

将HTML更改为HTML块中的以下内容。 JS和CSS保持不变。只是添加了snippit工作。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.