JavaScript笔记-点击切换图片

x33g5p2x  于2022-05-23 转载在 Java  
字(0.6k)|赞(0)|评价(0)|浏览(412)

最近(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>

相关文章