Ändern von src nach 3 Sekunden

Question

Ich versuche, das src-Attribut eines Bildes mit der Klasse "bg" nach 3 Sekunden in einer Schleife zu ändern. Es geht von "bg1.jpg" bis "bg5.jpg". Aus irgendeinem Grund funktioniert mein Code nicht und ich bekomme keine Fehler.

$(document).ready(function(){ 

var $bg = $('.bg'); 

function bgChange() { 
    var i = 1; 
    while (i < 6) { 
    var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg'; 
    setTimeout($bg.attr('src', background), 1000); 
    i++; 
    if (i === 5) { 
     i = 1; 
    } 
    } 
} 

bgChange(); 
//------------------------------------ 
}); 

Answer 1

Sie sollten src eins nach dem anderen mit Intervallzeit ändern, also verwenden Sie keine while || for Schleifen.

Versuchen Sie dieses Beispiel mit setTimeout()

var $bg = $('.bg'); 

function bgChange(i) { 
    if(i == 6)i = 1; // reset 
    var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg'; 
    $bg.attr('src', background); // change src 
    setTimeout(function(){bgChange(i++)}, 3000); // call again after 3 sec 
} 

bgChange(1); 

Answer 2

1. Ihre Funktion deklarieren.
2. setInterval und Ihre Funktion

var index = 1; 
function bgChange(){ 
    if(index == 6){ 
     index = 1; 
    } 
    document.getElementById("image").src = "bg" + num + ".jpg"; 
    index += 1; 
} 
var i = setInterval(bgChange, 3000); 

Answer 3

jQuery(function($) { 
 

 
    var $bg = $('.bg') 
 
    var root = '<?php echo $siteroot; ?>' 
 
    var i = 0 
 

 
    function bgChange() { 
 
    var background = root + '/img/bg' + (++i) + '.jpg' 
 
    console.log(background) 
 
    $bg.attr('src', background) 
 
    i %= 6 
 
    setTimeout(bgChange, 1000) 
 
    } 
 

 
    bgChange() 
 
})

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

Answer 4

Sie verweisen beginnen sofort alle Timer.

Wenn es etwas tut (was ich nicht sicher bin, es ist kein Funktionskörper), wartet es 1000ms, bevor es die Funktion 5 Mal auf einmal aufruft, um dann die Funktion nie wieder aufzurufen.

Was Sie tun können, ist eine Funktion, die sich nach einer Verzögerung selbst aufrufen wird, werfen Sie einen Blick auf das Snippet.

var imageRoot = "/images/backgrounds/" 
 
var backgrounds = [ 
 
    "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg", 
 
    "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg", 
 
    "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg", 
 
    imageRoot + "bg4.jpg", 
 
    imageRoot + "bg5.jpg", 
 
] 
 
function UpdateImageBackground(i, images) { 
 
    // Make sure i doesn't go past images.length 
 
    i = i%images.length; 
 
    
 
    var bgs = document.getElementsByClassName("bg"); 
 
    for(var j=0; j<bgs.length; j++) { 
 
    bgs[j].src = images[i]; 
 
    } 
 
    
 
    // Call itself again after 3000 miliseconds 
 
    setTimeout(function() { 
 
    UpdateImageBackground(i+1, images); 
 
    }, 3000); 
 
} 
 
UpdateImageBackground(0, backgrounds);

<img class="bg" />

Answer 5

können Sie setInterval() tun verwenden, dass

$(document).ready(function(){ 
    // run background change function 
    bgChange(5); // 5 is number of images 
}); 

// functions 
function bgChange(num_of_images) { 
    var $bg = $('.bg'); 
    var i = 1; 
    setInterval(function(){ 
     i = (i < num_of_images) ? i + 1 : 1; 
     var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg'; 
     $bg.attr('src', background); 
    } , 3000); 
} 

Testcode

$(document).ready(function(){ 
 
    // run background change function 
 
    bgChange(5); // 5 is number of images 
 
}); 
 

 
// functions 
 
function bgChange(num_of_images) { 
 
    var $bg = $('.bg'); 
 
    var i = 1; 
 
    setInterval(function(){ 
 
    i = (i < num_of_images) ? i+1 : 1; 
 
    \t /* 
 
     var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg'; 
 
     $bg.attr('src', background); 
 
    */ 
 
    $bg.html('bg'+i); 
 
    
 
    } , 3000); 
 
}

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