JavaScript图片src未变更问题：实现两秒切换图片源失败求助

嘿，我明白你的困扰——你写了每两秒切换两张图片的代码，但图片愣是没动静，对吧？让我帮你揪出问题所在～

问题根源 #

你一开始把document.getElementById('bannerPic').src赋值给变量pic，但这个操作是一次性取值：之后你修改pic的内容，只是改变了变量本身，并没有把新的图片地址同步给img元素的src属性。简单说就是，你光在自己的变量里改来改去，没告诉浏览器“快更新图片地址呀！”

修正后的代码方案 #

这里给你两种可行的修改方式：

方案一：保留变量，同步更新元素属性

<img id="bannerPic" src="banner1.jpg"> 
<script> 
// 先获取img元素，而不是只拿它的src值
var picElement = document.getElementById('bannerPic');
// 用变量记录当前显示的图片名称
var currentPic = 'banner1.jpg';

setInterval(function(){ 
  if(currentPic === 'banner1.jpg'){ 
    currentPic = 'banner2.jpg';
    console.log('切换到banner2'); 
  } else{ 
    currentPic = 'banner1.jpg';
    console.log('切换到banner1'); 
  }
  // 关键步骤：把新的图片地址赋值给元素的src属性
  picElement.src = currentPic;
}, 2000); 
</script>

方案二：直接操作元素的src（更简洁）

<img id="bannerPic" src="banner1.jpg"> 
<script> 
var picElement = document.getElementById('bannerPic');

setInterval(function(){ 
  // 用includes判断，避免浏览器把相对路径转成绝对路径导致判断失效
  if(picElement.src.includes('banner1.jpg')){ 
    picElement.src = 'banner2.jpg';
    console.log('切换到banner2'); 
  } else{ 
    picElement.src = 'banner1.jpg';
    console.log('切换到banner1'); 
  }
}, 2000); 
</script>

额外提醒 #

为什么用includes而不是直接判断等于banner1.jpg？因为浏览器会自动把相对路径（比如banner1.jpg）转换成完整的绝对路径（比如http://你的域名/banner1.jpg），直接用===判断会匹配失败，includes能避开这个问题。

内容的提问来源于stack exchange，提问作者tropic