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背景滑块重复第一个图像

回答

相关问题