Question

免责声明：我对javascript和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:develop@vo88pro.com">develop@vo88pro.com</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;

}

JS

    $(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);

});

Jquery背景滑块重复第一个图像

0 个答案: