負載交替背景圖像

Question

我在rails 4 app中使用bootstrap。

我剛剛放棄嘗試將bootstrap輪播集成到我的頁面中。 （它將我的文本推送到下一個容器，並且不會使用我的樣式調整圖像大小）。

我有兩個背景圖片。 我的目標是讓這些從頁面加載時開始，在計時器上旋轉。

我的css有一個背景圖片，頂部有文字，背景圖片下半部分頂部有一個黑暗背景，因此文字更清晰可讀。 我不希望文本隨着背景圖像的改變而改變。

我有以下css和html。 我試圖使用人們為各種事件設置的js，但沒有任何東西在使用這種結構。

有誰知道如何交替背景圖像？

HTML：

<div class= "containerfluid">
  <div class="collagecontainer">
    <div class="row">
      <div class="col-md-12">
        <div class= "row">
          <div class="col-md-12"> 
            <div class="module">
              <header>
                <h1 style="letter-spacing:2px"><br><br><br>Constant header remains the same</h1>
                <h3>constant tagline remains the same</h3>
                </header>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </div>

CSS：

.module {
  background: image-url('glowc.jpg');
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  margin: 0px;
}

.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.module > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 200%;
  background-color: black;
  opacity: 0.6;
  background-attachment: fixed;
  -webkit-filter: blur(4px) ;
  filter: blur(4px) ;
}
.module > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
  margin: 0;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 50px;
  position: relative;
  z-index: 1;
}

.module > header > h3 {
  margin: 0;
  padding-left:15%;
  padding-right:15%;
  padding-top:20px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 25px;
  color:#E8DA0C;
  position: relative;
  z-index: 1;
}

* {
  box-sizing: border-box;
}

我想在.module中使用背景圖像來在glowc.jpg和glowp.jpg之間切換。 其余的都應該保持不變。

JS：

我想弄清楚這一點。 我已達到這一點但卻迷茫和迷茫。

var images = [
do i put my alternate image here?
 ];

 var index = 0;

 setInterval(change_up, 1000);

 function change_up(){

     index = (index + 1 < images.length) ? index + 1 : 0;

   $('.block').fadeOut(300, function(){

     $(this).css('background-image', 'url('+ images[index] + ')')

     $(this).fadeIn(300);

   });
 }

Answer 1

您只需設置圖像的類和URL。

DEMO https://jsfiddle.net/maxlipsky/ua337onq/1/

var images = [
"http://upload.wikimedia.org/wikipedia/ru/a/a6/Bender_Rodriguez.png", "http://theinfosphere.org/images/thumb/4/43/Bender.png/180px-Bender.png"
 ];

 var index = 0;

 setInterval(change_up, 2000);

 function change_up(){

     index = (index + 1 < images.length) ? index + 1 : 0;

   $('.module').fadeOut(300, function(){

     $(this).css('background-image', 'url('+ images[index] + ')')

     $(this).fadeIn(300);

   });
 }