最近(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>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/124920537
内容来源于网络,如有侵权,请联系作者删除!