Winziges Problemchen mit Hintergrund fader

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Jokerjoe

Neues Mitglied
6 Mai 2013
17
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.470
294
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);
 
Reactions: Jokerjoe
Werbung: