利用JS实现图片切换

清疚 2022-04-15 01:15 727阅读 0赞

事件举例:  
1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。  
**说明：**  
1.一般来说对于一个事件问题处理起来分为三个步骤：  
（1）获取事件  
（2）绑定事件  
（3）书写事件驱动程序  
**代码如下**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>实战</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;//清除默认样式
    }
    img{
    	cursor:pointer;/*定义鼠标的形状，鼠标形状为小手*/
    	border:1px #66FFFF solid;/*给图片设置一个边框*/
    }
    </style>
    <script type="text/javascript">
    //onload的作用是等事件加载完以后才执行此程序
    window.onload=function()
    {
    	//获取事件
    	var img1=document.getElementById("tp");
    	//绑定事件
    	img1.onmousemove=function()
    	{
    		img1.src="img/7.jpg";//事件驱动程序（修改img的src属性，移入为新的照片）
    	};
    	//获取事件
    	var img2=document.getElementById("tp");
    	//绑定事件
    	img2.onmouseout=function()
    	{
    		img2.src="img/2.jpg";//事件驱动程序（修改img的src属性，移除为原照片）
    	};
    };
    </script>
    </head>
    <body>
    <img src="img/2.jpg" id="tp">
    </body>
    </html>

效果图如下（因为我不会上传动态效果所以想要看真正效果的可以自己试试）：  
**此图为鼠标离开时的图片**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
**此图为鼠标移入时的图片**  
![第二张图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]  
2.当点击按钮时会实现图片的切换  
**说明：图片切换的实质就是改变图片（img）的src属性**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>实战</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    #outer{
    	width:426px;/*图片的宽高度自适应*/
    	padding:10px;/*内边距为10*/
    	margin:50px auto;/*让整个div居中*/
    	background-color:#66FFFF;/*设置背景颜色*/
    	text-align:center;/*使按钮居中*/
    }
    </style>
    <script type="text/javascript">
    //onload的作用是等事件加载完以后才执行此程序
    window.onload=function()
    {
    	//获取按钮事件
    	var bt1=document.getElementById("pre");
    	var bt2=document.getElementById("next");
    	//获取img标签中的第一个元素结点
    	var img=document.getElementsByTagName("img")[0];
    	//创建一个数组用来保存图片的路径（即src属性）
    	var imgarr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    	//设置数组的索引下标
    	 var index=0;
    	 //获取p标签
    	var pbq=document.getElementById("pid");
    	//设置提醒文字
    	pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	//绑定事件
    	bt1.onclick=function()
    	{
    		//书写事件驱动程序
    		index--;//切换到上一张索引自减
    		//判断索引是否小于0
    		if(index<0)
    		{
    			index=imgarr.length-1;//目的是可以实现循环切换
    		}
    		//修改img的src属性
    		img.src=imgarr[index];
    		//当点击按钮以后，重新设置p标签中的显示内容
    		pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	};
    	//绑定事件
    	bt2.onclick=function()
    	{
    		//书写事件驱动程序
    		index++;//切换到下一张索引自加
    		//判断索引是否大于4
    		if(index>imgarr.length-1)
    		{
    			index=0;//目的是可以实现循环切换
    		}
    		//修改img的src属性
    		img.src=imgarr[index];
    		//当点击按钮以后，重新设置p标签中的显示内容
    		pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	};
    };
    </script>
    </head>
    <body>
    <div id="outer">
    <p id="pid"></p>  
    <img src="img/1.jpg">
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
    </div>
    </body>
    </html>

效果图如下（就随便截了两张，更多效果自己尝试一下）：  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220415/158acc6177234af68826955d34744845.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220415/72f09757de6149d2b0f08ed8295d5d89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]: /images/20220415/64a89f59ca684492895456006ebf4397.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]: /images/20220415/7e5f362e86734d4885d6ba20893ba42a.png