gpt4 book ai didi

JavaScript笔记-点击切换图片

转载 作者:知者 更新时间:2024-03-13 19:34:03 27 4
gpt4 key购买 nike

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com