jquery背景滑塊重複第一個圖像

免責聲明：我對javascript和jquery無能爲力。我使用代碼片段來獲取個人項目。jquery背景滑塊重複第一個圖像

我有一個背景圖像滑塊（推子），我用我的網站。主要問題是第一個圖像在第一次啓動時顯示兩次，僅在第一次啓動時顯示。尋找一種方法讓它不這樣做。

而且還預載圖像，而我在它...任何幫助將不勝感激！

測試網站在下面，然後是相關的（我認爲）代碼。提前致謝！

tjoseph.com/tjoseph_2017

HTML

<body> 
<div class="fader"> 

</div> 
    <div id="textbox"> 
     <div id="text"> 
     <p id="name">Travis Hoffman-Joseph Photography</p> 
     <p><a id="email" href="mailto:[email protected]">[email protected]</a></p> 
     <p>917.952.0596</p> 
     </div> 
     <div id="contact_social"> 
    <ul> 

     <a href="http://tjoseph13.tumblr.com" target="new" onMouseOver="MM_swapImage('_tumblr','','images/over_tumblr.gif',1)" onMouseOut="MM_swapImgRestore()"> 
      <img id="_tumblr" src="images/_tumblr.gif" alt="tumblr"></a> 

     <a href="http://www.instagram.com/tjoseph_vo88" target="new" onMouseOver="MM_swapImage('instagram','','images/over_instagram.gif',1)" onMouseOut="MM_swapImgRestore()"><img id="instagram" src="images/_instagram.gif" alt="instagram"></a> 

    </ul> 
    </div> 
    <div id="footer">all rights reserved © 2017</div> 
    </div> 
</body>

CSS

.fader 
{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    z-index: -99; 

}

$(document).ready(function(){ 

    var count = 0; 
    var images = ["bg_images/bg_img01.jpg","bg_images/bg_img02.jpg","bg_images/bg_img03.jpg"]; 
    var image = $(".fader"); 

    image.css("background-image","url("+images[count]+")"); 

    setInterval(function(){ 
    image.fadeOut(250, function(){ 
     image.css("background-image","url("+images[count++]+")"); 
     image.fadeIn(250); 
    }); 
    if(count == images.length) 
    { 
     count = 0; 
    } 
    },2500); 

});

來源

2017-08-16 Travis Hoffman-Joseph

的問題是，fader DIV有bg_img01.jpg作爲頁面加載時的背景圖像，所以當Javascript啓動時，它將加載與加載時已經使用的圖像相同的圖像。將count變量的初始聲明更改爲1應解決該問題。

var count = 1;

來源

2017-08-16 16:38:01 user13286

我試圖改變計數1，但現在它與第二圖像同樣的事情......當我從image.css刪除「背景圖片」，它顯示黑屏，然後啓動腳本無需重複。或者當我將var count更改爲3時，我會在同一個黑色屏幕上看到黑色，然後腳本沒有重複。有沒有辦法設置載入圖像？ –

jquery背景滑塊重複第一個圖像

回答

相關問題