使用js实现点击切换图片

最新推荐文章于 2024-05-16 10:12:55 发布

IM_GOOD

最新推荐文章于 2024-05-16 10:12:55 发布

阅读量1.5k

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/IM_GOOD/article/details/129584791

版权

本文介绍了如何使用JavaScript实现点击切换图片的功能，适用于png格式图片无法通过CSS改变颜色的情况。通过JS代码控制，成功达成切换效果。

摘要由CSDN通过智能技术生成

实现效果如上图，因为这些图片都是png格式，没法通过css去改变颜色，所以我用js来控制切换的图片，代码如下：

<div class="nav">
			<img src="../../../../src/assets/images/test/jingdian.png" alt="" />
			<div class="nav-info">
				荆竹村位于重庆市武隆区仙女山街道西南部，西接羊角街道，南邻芙蓉街道，东接仙女山街道白果村，北邻仙女山街道石梁子社区，幅员面积34平方公里。全村辖8个村民小组638户，户籍人口2038人，森林覆盖率67%。
			</div>
			<div class="nav-icon">
				<div class="icon-item-box" v-for="(i, index) in icon" :key="index" @click="changeIcon(i)">
					<img class="icon-img" :src="getImageUrl(i.icon)" alt="" />
					<a class="icon-text">{
  { i.title }}</