2016-11-04 79 views
-2

我試圖在循環3秒後用「bg」類更改圖像的src屬性。它從「bg1.jpg」到「bg5.jpg」。出於某種原因,我的代碼不工作,我沒有得到任何錯誤。3秒後更改src

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

所以這個例子中,你在你的JavaScript文件有PHP,我猜你的JavaScript文件不被通過你的PHP處理器提供服務? - 除非你的JavaScript是內聯的。 –

+1

... setTimeout正在無限循環中調用! while(i <6){if(i === 5)i = 1} –

+0

setTimeout將不會執行任何操作,直到JavaScript完成任務。電話已排隊。 –

回答

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); 
+0

你測試了你的代碼嗎?運行速度超快... – Endless

+0

這工作了一次,我把php作爲@Lee Kowalkowski推薦。謝謝。 – Zenneson

-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); 
+0

你的意思是setTimeout() – magreenberg

+2

@magreenberg嗯? 'setTimeout'只執行一次。 – Stijn

+0

我的代碼適合我。事實上,我只是做了完全一樣的事情。我有一個函數來修改一個img標籤的src attrb。編輯,以顯示我如何實現 –

-1

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>

+0

爲什麼downvote? – Endless

0

要一次啓動所有的計時器。如果它執行了任何操作(我不確定它是否確實如此),它將等待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" />

1

可以使用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>