Winziges Problemchen mit Hintergrund fader

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Jokerjoe

Neues Mitglied
6 Mai 2013
6
0
1
Hallo zusammen, ich hoffe auf Hilfe :smile:

Ich habe mir gerade einen Background fader gebaut. Das Hintergrundbild soll ineinander faden. Das klappt auch soweit gut.
Allerdings wird das erste Hintergrundbild bei der ersten Schleife in "sich selber" gefaded. D.h. man sieht: Bild1, Bild1, bild2, und von vorne (dann jeweils korrekt nur 1x).

Warum ist das erste Bild in der ersten Schleife doppelt zu sehen?
(Neben dem beigefügten JS Code habe ich noch jquery-3.4.1.min.js drin)

Danke :smile:

HTML Code:

Code:
<!DOCTYPE>
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bg_img_fader.css" />
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bg_img_fader.js"></script>
    <title>test</title>
</head>
<body>
    
    <div class="fader">
        
    </div>
    
</body>
</html>

CSS Code:

CSS:
.fader
{
  position: absolute;
  height: 100%;
  width: 100%;
  left:0;
  top:0;
  z-index: -99;
}

JS Code:

JavaScript:
$(document).ready(function(){

  var count = 0;
  var images = ["https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529__340.jpg","https://cdn.pixabay.com/photo/2017/10/23/16/43/autumn-2881586_960_720.jpg"];
  var image = $(".fader");

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

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

});
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.336
269
83
66
Sollte sich beheben lassen, indem Du den Zähler vor dem Setzen des Hintergrundbildes erhöhst:
Code:
  setInterval(function(){
    count++;
    if(count == images.length)
    {
      count = 0;
    }
    image.fadeOut(500, function(){
      image.css("background-image","url("+images[count]+")");
      image.fadeIn(500);
    });
  },2000);
 
Werbung:

Latest posts