3秒后更改src

Question

我试图在循环3秒后用“bg”类更改图像的src属性。它从“bg1.jpg”到“bg5.jpg”。出于某种原因，我的代码不工作，我没有得到任何错误。

$(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

您应该用间隔时间逐个更改src，所以请勿使用while || for循环。

尝试用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. 声明你的函数。
2. 的setInterval和引用您的功能

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

要一次启动所有的计时器。如果它执行了任何操作（我不确定它是否确实如此），它将等待1000ms，然后再一次调用该函数5次，然后再次不再调用该函数。

你可以做的是一个函数，会在延迟后自行调用，看看代码片段。

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

可以使用setInterval()做

$(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); 
} 

测试代码

$(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>