图片切换之HTML

功能介绍：

界面分为两部分，切换展示界面和选择图片界面。
在逐次点击图片之后，会在上面的展示内，逐个展示选择的图片。

方法说明：

展示界面无需提前插入图片。
展示界面和选择图片界面一样，都需要设置id，以此来正确区分。
选择图片界面的每一张图片，涉及到方法，也就是onClick，通过
自定义一个JavaScript方法，传入选择图片的src，替换掉主界面的src，达到图片切换效果。

展示一下效果呗：

在这里插入图片描述

源码如下:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <script>
        function fun(imgSrc) {<!--新图片源地址-->
            document.getElementById("mainImg").src=imgSrc;<!--先根据Id找到原地址src,z再接收方法参数imgSrc，替换掉找到的原图片src，达到切换图片的效果-->
        }
    </script>
</head>
<body>
<div>
    <div class="main">
 
        <img scr="" width="300px" height="300px" id="mainImg"> <!--初始化界面，无需提前插入图片-->
    </div>
    <div class="menu">
        <img src="img/0.jpg" height="30px" width="30px" id="img/0.jpg" onClick="fun('img/0.jpg')"/>
        <img src="img/1.jpg" height="30px" width="30px" id="img/1.jpg" onClick="fun('img/1.jpg')"/>
        <img src="img/2.jpg" height="30px" width="30px" id="img/2.jpg" onClick="fun('img/2.jpg')"/>
        <img src="img/3.jpg" height="30px" width="30px" id="img/3.jpg" onClick="fun('img/3.jpg')"/>
        <img src="img/4.jpg" height="30px" width="30px" id="img/4.jpg" onClick="fun('img/4.jpg')"/>
    </div>
</div>
</body>
</html>复制

标签

图片切换之HTML

功能介绍：

方法说明：

展示一下效果呗：

源码如下:

前端提高篇（102）：jQuery高级方法callbacks、deferred

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

html 无序标签有序标签及表单

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

H5 CSS3-移动端兼容/调试/视口/flex布局

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>图片切换</title>
	<script>
	function fun(imgSrc) {<!--新图片源地址-->
	document.getElementById("mainImg").src=imgSrc;<!--先根据Id找到原地址src,z再接收方法参数imgSrc，替换掉找到的原图片src，达到切换图片的效果-->
	}
	</script>
	</head>
	<body>
	<div>
	<div class="main">

	<img scr="" width="300px" height="300px" id="mainImg"> <!--初始化界面，无需提前插入图片-->
	</div>
	<div class="menu">
	<img src="img/0.jpg" height="30px" width="30px" id="img/0.jpg" onClick="fun('img/0.jpg')"/>
	<img src="img/1.jpg" height="30px" width="30px" id="img/1.jpg" onClick="fun('img/1.jpg')"/>
	<img src="img/2.jpg" height="30px" width="30px" id="img/2.jpg" onClick="fun('img/2.jpg')"/>
	<img src="img/3.jpg" height="30px" width="30px" id="img/3.jpg" onClick="fun('img/3.jpg')"/>
	<img src="img/4.jpg" height="30px" width="30px" id="img/4.jpg" onClick="fun('img/4.jpg')"/>
	</div>
	</div>
	</body>
	</html>

图片切换之HTML

功能介绍：

方法说明：

展示一下效果呗：

源码如下:

微信扫一扫：分享