JavaScript笔记-点击切换图片

最近（2022-03-25）想做个导航页。

涉及这个知识点，在此记录下，实现的效果如下：

点击那个百度后，会切换：

关键代码如下：

图片相关的html代码：

<div id="engine-logo" class="search-logo my-2">
	<img id="searchLogo" style="width: 220px; height:80px;" alt="搜索引擎Logo" onclick="changePic()" src="img/baidu.png">
</div>

对应的changePic的JS代码如下：

<script type="text/javascript">
 
	let picIndex = 0;
	let imgArr = ['img/baidu.png', 'img/bing.png', 'img/google.png'];
 
	function changePic() {
 
		let currentPic = document.getElementById('searchLogo');
		picIndex = (picIndex + 1) % imgArr.length;
		currentPic.setAttribute("src", imgArr[picIndex]);
 
	}
 
</script>