【JavaScript】（8）——实例：图片切换效果

最新推荐文章于 2024-01-25 12:30:48 发布

Reka

最新推荐文章于 2024-01-25 12:30:48 发布

阅读量2.4k

点赞数 4

分类专栏：我的成长路の计算机 ----------【Web前端】 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/helijie92902/article/details/50884950

版权

背景：不知道怎么回事，最近做的项目都是在和UI打交道，各种图片，各种表格，各种按钮的组合、拼接；写各种JS方法让他们无缝组合，自由切换；对CSS+HTML中的多种属性都熟悉了一下，盒子模型，背景图片等等。刚刚接手的时候既兴奋又激动，但是实际忙起来，既眼花又头疼。不过还好持续的时间不算太长，熟练了，适应了，就好了。

一、问题出世

项目中要实现checkbox功能，但是用的是两张图片，点击图片后互相交换，想想感觉挺简单的，在图片那里添加一个onclick事件，然后再写这个onclick事件的方法，最后调用，简单到不行不行的，于是，第一版出炉了：

两张图片：

JS方法：

<span style="font-family:KaiTi_GB2312;"><Script>		
	var numb = 0;	        
	function changeimg(){
	   numb++;				
           if (numb % 2 == 0) {			
		document.getElementById('img1').src = "img/yes.jpg";
            }			
           else {			
		document.getElementById('img1').src = "img/no.jpg";		
            }
		}
</Script>	</span>

HTML界面：

<span style="font-family:KaiTi_GB2312;"><body>
	<div class="container1" style="float:center" width=

最低0.47元/天解锁文章

Reka

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
70
评论
【JavaScript】（8）——实例：图片切换效果

背景：不知道怎么回事，最近做的项目都是在和UI打交道，各种图片，各种表格，各种按钮的组合、拼接；写各种JS方法让他们无缝组合，自由切换；对CSS+HTML中的多种属性都熟悉了一下，盒子模型，背景图片等等。刚刚接手的时候既兴奋又激动，但是实际忙起来，既眼花又头疼。不过还好持续的时间不算太长，熟练了，适应了，就好了。一、问题出世项目中要实现checkbox功能，但是用的
复制链接

扫一扫