Grund JQuery Fader

Question

ich diese einfachen Fader in JQuery erstellt,

Es läuft gut, außer dass das erste Bild verblasst zweimal, wie behebe ich das? hier ist der Code:

$(document).ready(function(){ 
 

 
    var count = 0; 
 
    var images = ["http://kingofwallpapers.com/fantasy/fantasy-005.jpg", 
 
       "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg", 
 
       "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg", 
 
       "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.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; 
 
    } 
 
    },5000); 
 

 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fader"></div>

Answer 1

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

mit

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

$(document).ready(function(){ 
 

 
    var count = 0; 
 
    var images = ["http://kingofwallpapers.com/fantasy/fantasy-005.jpg", 
 
       "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg", 
 
       "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg", 
 
       "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.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; 
 
    } 
 
    },5000); 
 

 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fader"></div>

ersetzen

Answer 2

Ihr Problem ist, dass Sie das gleiche Bild zweimal präsentieren. Du merkst es nicht, aber die anderen Bilder machen dasselbe, wenn du die Zeit erhöhst. Lösung erstellen Sie eine Zeitvariable. Verwenden Sie diese Variable, wenn Sie das Bild laden die Wartezeit 0 ist, dann ändert es auf 500.

var i=0; 
... 
image.fadeOut(i, function(){ 
i=500; 
... 

$(document).ready(function(){ 
 
    var i=0; 
 
    var count = 0; 
 
    var images = ["http://kingofwallpapers.com/fantasy/fantasy-005.jpg", 
 
       "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg", 
 
       "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg", 
 
       "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.jpg"]; 
 
    var image = $(".fader"); 
 

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

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

 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fader"></div>

Answer 3

Hier sind weitere kürzere Version. Legen Sie Ihr erstes Bild als Standard-Hintergrundbild mit CSS fest.
Und ändern Sie den Index von images.

$(document).ready(function(){ 
 
    var count = 0; 
 
    var images = [ 
 
       "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg", 
 
       "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg", 
 
       "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.jpg", 
 
       "http://kingofwallpapers.com/fantasy/fantasy-005.jpg"]; 
 
       
 
    var image = $(".fader"); 
 
    setInterval(function(){ 
 
     image.fadeOut(500, function(){ 
 
     image.css("background-image","url("+images[count++]+")"); 
 
     image.fadeIn(500); 
 
    }); 
 
    if(count == images.length){count = 0} 
 
    },5000); 
 
});

.fader { 
 
    position: absolute; 
 
    height: 50%; 
 
    width: 50%; 
 
    left:0; 
 
    top:0; 
 
    z-index: -99; 
 
    background-image: url("http://kingofwallpapers.com/fantasy/fantasy-005.jpg"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fader"></div>