JavaScript圖像src不變

Question

我正在嘗試制作每兩秒鍾在兩個源之間切換的圖像，但是圖像沒有變化

<img id="bannerPic" src="banner1.jpg">
<script>
var pic = document.getElementById('bannerPic').src;
setInterval(function(){
if(pic == 'banner1.jpg'){
pic = 'banner2.jpg';
console.log('change1');
}
else{
pic = 'banner1.jpg';
console.log('change2');
}
}, 2000);
</script> 

Answer 1

您正在為變量分配值，而不是屬性src 。

您需要將新值設置為屬性src

要檢查當前網址，請使用以下命令： img.src.indexOf('banner1.jpg')

 var img = document.getElementById('bannerPic'); setInterval(function() { if (img.src.indexOf('banner1.jpg') !== -1) { img.src = 'banner2.jpg'; console.log('change1'); } else { img.src = 'banner1.jpg'; console.log('change2'); } }, 2000); 

 <img id="bannerPic" src="banner1.jpg"> 

Answer 2

 <img id="bannerPic" src="banner1.jpg"> <script> var pic = document.getElementById('bannerPic') console.log(pic.src) setInterval(function(){ if(pic.src == 'https://stacksnippets.net/banner1.jpg'){ pic.src = 'https://stacksnippets.net/banner2.jpg'; console.log('change1'); } else{ pic.src = 'https://stacksnippets.net/banner1.jpg'; console.log('change2'); } }, 2000); </script>