基本JQuery的推子

Question

我創建了JQuery的這個簡單的推子，

它運行良好，只是，第一圖像變淡了兩次，我該如何解決呢？ 這裏是代碼：

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

與

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>

Answer 2

你的問題是你兩次呈現相同的圖像。您不會注意到，但如果您增加時間，其他圖像也會執行相同的操作。解決方案創建時間變量。使用此變量時，您加載圖像的等待時間爲0，然後變爲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

這裏有更多的短版。 用css將你的第一張圖片設置爲默認背景圖片。
並改變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>