幻灯片显示下面的另一张幻灯片

时间：2016-12-14 12:46:19

标签： javascript html css slideshow banner

我目前有这个滑块，但是当我加载网站时，我可以在顶部看到另一张幻灯片。然后加载2秒，然后它就会消失，幻灯片开始流畅地工作。

我似乎无法弄清楚造成它的原因。如果有人可以帮助我，那会很棒。

这是我的JAVASCRIPT，CSS＆amp; HTML：

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow');
},  4000);
#slideshow {
    position: relative;
    width: 100%;
    margin-top: -10px;
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow {
  margin-top: 35px;
  background-image: url('../images/Untitled-1.jpg');
  height: 360px;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_columns {
    display: flex;
}

.img {
  margin-top: -35px;
  margin-left: 190px;
}

.column {
  flex: 1;
}

.column-one {
    order: 1;
}

.column-two {
    order: 2;
    margin-top: 100px;
    margin-left: -100px;
}

.header1 {
  color: #1e1e1c;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  font-style: italic;
}

.p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 300;
}

.button1 {
  color: #fff;
  font-size: 15px;
  margin-left: 8px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button_1 {
  color: #fff;
  font-size: 15px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button2 {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  padding: 3px 22px;
  background-color: #656565;
  text-decoration: none;
}
<div id="slideshow">
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside2.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button_1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button2" href="bibliografi_knacker.html">Læs mere...</a>
      <a class="button1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
</div>

提前致谢！

2 个答案:

答案 0 :(得分：1)

只需将其添加到CSS

即可 
#slideshow > div:not(:first-child) {
  display: none;
}

并删除

$("#slideshow > div:gt(0)").hide();

太晚了

＆＃13;
＆＃13; 
$(function() {
  setInterval(function() {
    $('#slideshow > div:first')
      .fadeOut(0)
      .next()
      .fadeIn(0)
      .end()
      .appendTo('#slideshow');
  }, 4000);
});
＆＃13; 
#slideshow {
  position: relative;
  width: 100%;
  margin-top: -10px;
}
#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
#slideshow {
  margin-top: 35px;
  background-image: url('../images/Untitled-1.jpg');
  height: 360px;
  background-size: cover;
  background-repeat: no-repeat;
}
#slideshow > div:not(:first-child) {
  display: none;
}
.banner_columns {
  display: flex;
}
.img {
  margin-top: -35px;
  margin-left: 190px;
}
.column {
  flex: 1;
}
.column-one {
  order: 1;
}
.column-two {
  order: 2;
  margin-top: 100px;
  margin-left: -100px;
}
.header1 {
  color: #1e1e1c;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  font-style: italic;
}
.p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 300;
}
.button1 {
  color: #fff;
  font-size: 15px;
  margin-left: 8px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}
.button_1 {
  color: #fff;
  font-size: 15px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}
.button2 {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  padding: 3px 22px;
  background-color: #656565;
  text-decoration: none;
}
＆＃13; 
<base href="http://jakobhoeg.com/projekta/"/><!-- remove this before using -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="bgbanner">
    <div class="banner_columns1">
      <div class="column column-one">
        <div class="banner">
          <img class="img" src="images/Bog-til-hjemmeside2.png" width="380">
        </div>
      </div>
      <div class="column column-two">
        <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
        <p class="p">- Kristeligt Dagblad, 2013</p>
        <a class="button_1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
      </div>
    </div>
  </div>
  <div class="bgbanner">
    <div class="banner_columns1">
      <div class="column column-one">
        <div class="banner">
          <img class="img" src="images/Bog-til-hjemmeside.png" width="380">
        </div>
      </div>
      <div class="column column-two">
        <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
        <p class="p">- Kristeligt Dagblad, 2013</p>
        <a class="button2" href="bibliografi_knacker.html">Læs mere...</a>
        <a class="button1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

这里的问题似乎是两个图像的样式

bgbanner

似乎一直显示，直到javascript没有显示为止。

尝试隐藏您不希望在开头显示的那个，就像淡出方法一样，将其不透明度更改为：

opacity : 0

相关问题
最新问题