jQuery背景滑块重复第一张图片

Question

DISCLAIMER:I am clueless to javascript and jquery. 免责声明：我对javascript和jquery一无所知。 I use code snippets to get by on personal projects. 我使用代码片段来完成个人项目。

I have a background image slider (fader) that I'm using for my website. 我有一个用于网站的背景图像滑块（推子）。 The main problem is that the first image displays twice when it first starts up and only when it first starts up. 主要问题是第一张图像在第一次启动时仅在第一次启动时显示两次。 Looking for a way to have it not do that. 寻找一种使其不这样做的方法。

And also preload the images while I'm at it... Any help will be appreciated! 并在加载图片时预加载图片...任何帮助将不胜感激！

The test site is below followed by the relevant (I think) code. 下面是测试站点，然后是相关（我认为）代码。 Thanks in advance! 提前致谢！

tjoseph.com/tjoseph_2017 tjoseph.com/tjoseph_2017

HTML 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 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 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);

});

Answer 1

The issue is that the fader div has the bg_img01.jpg as a background image on page load, so when the Javascript fires, it is loading the same image that's already being used on load. 问题在于， fader div将bg_img01.jpg作为页面加载时的背景图像，因此，在触发Javascript时，它会加载已在加载时使用的同一图像。 Changing the initial declaration of the count variable to 1 should resolve the issue. 将count变量的初始声明更改为1应该可以解决该问题。

var count = 1;

jQuery背景滑块重复第一张图片

问题描述

1 个解决方案

解决方案1
0 2017-08-16 16:38:01

jQuery背景滑块重复第一张图片

问题描述

1 个解决方案

解决方案1 0 2017-08-16 16:38:01

解决方案1
0 2017-08-16 16:38:01