Question

我刚刚创建了一个文本滑块，div带有根据其内容扩展的文本。问题是，在这个div下是另一个div，当文本滑块div扩展它时，它会在它下面的div上展开。以下是图片的简要说明。

文本幻灯片位于红色div之上，而不是红色div位于

之下

根据文字幻灯片内容，我需要红色div按下并向上拉

期望的结果

＆＃13;

$(function () {

        setInterval ("slideImages()", 5000);

    });

    function slideImages () {
        var oCurImage = $("#slide div.current");
        var oNxtImage = oCurImage.next();

        if (oNxtImage.length == 0) {
            oNxtImage = $("#slide div:first-child");
        }

            oCurImage.fadeOut().removeClass('current');
            oNxtImage.fadeIn().addClass('current').animate({opacity: 1.0}, 1000);
    }

＆＃13;

.news_others {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
}
#slide {
    width: 70%;
    margin: auto;
    position: relative;
    height: auto;
    background: #ffffff;
}
#slide div {
    position: absolute;
    z-index:0;
    background: #f5f5f5;
    height: auto;
    display: none;
    padding: 10px 20px;
    -webkit-box-shadow: 0 0 4px #ccc;
    -moz-box-shadow: 0 0 4px #ccc;
    box-shadow: 0 0 4px #ccc;
}
#slide div.current {
    z-index:1;
    display: initial;
}
#banner {
    width: 70%;
    height: 200px;
    margin: auto;
    clear: both;
    background: #dd0d0d;
}

＆＃13;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="news_others">
        <div id="slide">
            <div>
                <p>
                    Register as an Local buying agent if desire is to buy goods available within your current locations. Its, easy
                    , safe, and reliable as we carry out background checks on importers we link you with.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est turpis, fermentum vel leo quis, aliquam posuere ex.
                    Donec a efficitur augue, vel lobortis odio. Mauris est lectus, ornare ac justo eu, congue lacinia est. Proin id justo augue.
                </p>
            </div>
            <div>
                <p>
                    Register odio. Mauris est lectus, ornare ac justo eu, congue lacinia est. Proin id justo augue.
                </p>
            </div>
            <div>
                <p>
                    If this works then yea its good. Because jnsalsa s laslknalsl alsnbasnlka slanlsnlka slk alnsklans
                </p>
            </div>
            <div>
                <p>
                    Register as an Local buying agent if desire is to buy goods available within your current locations. Its, easy
                    , safe, and reliable as we carry out background checks on importers we link you with.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est turpis, fermentum vel leo quis, aliquam posuere ex.
                    Donec a efficitur augue, vel lobortis odio. Mauris est lectus, ornare ac justo eu, congue lacinia est. Proin id justo augue.
                </p>
            </div>
        </div>
        <div id="banner">
        </div>
    </div>

＆＃13;

任何帮助将不胜感激。提前致谢

Answer 1

我认为这段代码可以正常工作。

$(function() {
  slideImages()

  setInterval("slideImages()", 5000);

});

function slideImages() {
  var oCurImage = $("#slide div.current");
  var oNxtImage = oCurImage.next();

  if (oNxtImage.length == 0) {
    oNxtImage = $("#slide div:first-child");
  }

  oCurImage.fadeOut().removeClass('current');
  oNxtImage.fadeIn().addClass('current').animate({
    opacity: 1.0
  }, 1000);
}

.news_others {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
}

#slide {
  width: 70%;
  margin: auto;
  position: relative;
  height: auto;
  background: #ffffff;
}

#slide div {
  position: absolute;
  z-index: 0;
  background: #f5f5f5;
  height: auto;
  display: none;
  padding: 10px 20px;
  -webkit-box-shadow: 0 0 4px #ccc;
  -moz-box-shadow: 0 0 4px #ccc;
  box-shadow: 0 0 4px #ccc;
}

#slide div.current {
  z-index: 1;
  display: initial;
  background: #dd0d0d;
  ;
}


/* #banner {
        width: 70%;
        margin: auto;
        clear: both;
        background: #dd0d0d;
    } */

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="news_others">
    <div id="slide">
        <div>
            <p>
                Register as a Local buying agent if is want to buy goods available within your current locations. It's,
                easy
                , safe, and reliable as we carry out background checks on importers we link you with.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est turpis, fermentum vel leo quis, aliquam
                posuere ex.
                Donec a efficitur augue, vel lobortis odio. Mauris est lectus, ornare ac justo eu, congue lacinia est.
                Proin id justo augue.
            </p>
        </div>
        <div>
            <p>
                Register odio. Mauris est lectus, ornare ac justo eu, congue lacinia est. Proin id justo augue.
            </p>
        </div>
        <div>
            <p>
                If this works then yea its good. Because jnsalsa s laslknalsl alsnbasnlka slanlsnlka slk alnsklans
            </p>
        </div>
        <div>
            <p>
                Register as a Local buying agent if want to buy goods available within your current locations. It's,
                easy
                , safe, and reliable as we carry out background checks on importers we link you with.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est turpis, fermentum vel leo quis, aliquam
                posuere ex.
                Donec a efficitur augue, vel lobortis odio. Mauris est lectus, ornare ac justo eu, congue lacinia est.
                Proin id justo augue.
            </p>
        </div>
    </div>
</div>

根据div高度展开div容器

1 个答案: