我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？

1.HTML页面布局如图所示：

Main（div）

top(div)（显示需要显示的图片）
bottom

UL （li）<选择>left center right

2.实现上述布局

swap.html

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>在此插入标题</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
　　if(val=="left"){
　　　　left.style.display='block';//设置为显示
　　　　center.style.display='none';//设置为隐藏
　　　　right.style.display='none';
　　}else if(val=="center"){
　　　　left.style.display='none';
　　　　center.style.display='block';
　　　　right.style.display='none';
　　}else if(val=="right"){
　　　　left.style.display='none';
　　　　center.style.display='none';
　　　　right.style.display='block';
　　}
　　}
-->
</script>
</head>
<body>
　　<div class="main">
　　<div class="top">
　　<div class="left" id="left"><img src="data:images/left.jpg"/></div>
　　<div class="center" id="center"><img src="data:images/center.jpg"/></div>
　　<div class="right" id="right"><img src="data:images/right.jpg"/></div>
　　</div>
　　<div class="bottom">
　　<ul>
　　<li onmouseover="swap('left')"></li>
　　<li onmouseover="swap('center')"></li>
　　<li onmouseover="swap('right')"></li>
　　</ul>　　
　　</div>
　　</div>
　　</body>
　　</html>

3.css的实现

swap.css

@CHARSET "UTF-8";
.main{
　　width:1320px;
　　height:334px;
　　border:1px solid red;
　　background-color:silver;
}

.top{
　　width:1300px;
　　height:304px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: green;
}

.top .left{
　　display: block;//让left.jpg作为第一张图片显示
}
.top .center{
　　display: none;//初始状态不显示
}
.top .right{
　　display: none;//不显示
}

.bottom{
　　width:1300px;
　　height:15px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: gray;
}
.bottom ul{
　　margin: 0px;
　　margin-left:500px;
　　padding: 0px;
　　width:260px;
　　height:50px;
}
.bottom ul li{
　　width:80px;
　　height:10px;
　　margin-top:3px;
　　margin-right:3px;
　　background-color:yellow;
　　list-style-type: none;
　　float:left;
}

4.注意的地方

（1）关于display和visibility的区别要清楚。

display:在设置none的时候不仅内容会隐藏，而且元素不会在页面占据位置，隐藏相当于此元素暂时从页面删除了，不对现在页面起任何作用。

visibility：在设置hidden的时候，虽然内容不会显示但是，其元素任然会起作用，相当于只是把要显示的内容用隐藏了，然而东西依然存在。用俗话就是“站着茅坑不xx”;

(2)你是想要点击还是鼠标移动到指定位置图片就会变换？所使用的函数当然不一样，此处是如表移动到指定区域就会实现图片切换，所以使用的是onmouseover()。

利用JS实现点击按钮后图片自动切换的更多相关文章

  1. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  2. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  3. VS2010 使用时选择代码或双击时出错，点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

  4. TProcedure，TMethod，TNotifyEvent，TWndMethod的区别，并模拟点击按钮后发生的动作

    忽然发现TProcedure和TNotifEvent的区别还挺大的: procedure TForm1.Button2Click(Sender: TObject); begin ShowMessage ...

  5. Java基础 awt Button 点击按钮后在控制台输出文字

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  6. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  7. 如何让Web程序在点击按钮后出现如执行批处理程序般的效果

    在cli程序中,输入命令得到连续的输出已经是一种进度而美观的页面交互形式,好比下图: 而web程序里也有类似的场景,比如执行一个耗时任务,除了显示出等待图标外,用户还希望把执行的状态及时显示出来.如下 ...

  8. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  9. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

随机推荐

  1. My first win32 application program

    #include<afxwin.h>#include<afx.h>#define _AFXDLLclass CHelloApp :public CWinApp{public:  ...

  2. SNMP与MIB

    简单网络管理协议(SNMP:Simple Network Management Protocol)是一套网络管理协议,注意,SNMP是一个强大的网络管理协议,而不是"简单"的.利用 ...

  3. codevs 1082 线段树练习 3（区间维护）

    codevs 1082 线段树练习 3  时间限制: 3 s  空间限制: 128000 KB  题目等级 : 大师 Master 题目描述 Description 给你N个数,有两种操作: 1:给区 ...

  4. AC日记——最小的N个和 codevs 1245

    1245 最小的N个和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 有两个长度为 N ...

  5. 安全测试 - SQL注入

    1. 工具测试: 使用SQLMAP进行扫描 2. 手工测试: 观察参数的值value是否为数字型.如果是数字型进行数字型测试,否则跳到第4步进行字符型测试(例如如果出现a那说明是字符型,如果出现2则将 ...

  6. 微信H5中的一些坑

    最近在写微信公众号H5页面 遇到了一些坑,在这里记录一下 记录一下signature的计算 // 首先找到hex_sha1的加密算法,ticket 是后端提供的 var url_local = loc ...

  7. angular js 在ie11 下的get请求缓存问题的解决办法

    使用angularjs 1.x开发的应用在ie11 下回碰到各种怪异的情况:一般表现在:卡,慢,丑. 还有另外一种情况,就是:get请求被缓存,导致页面数据没有刷新.今天我们就来解决这个问题. 几行代 ...

  8. oracle日常——sqlplus客户端登录

    1.进入cmd 2.命令--sqlplus--提示输入帐号与密码 3.进入后,就可以直接键入sql命令 ps.sql命令后面需要添加分号后才可以回车执行

  9. Python学习--Python基础语法

    第一个Python程序 交互式编程 交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,提示窗 ...

  10. python 小功能

    目录 1.上传文件 2.验证码 一.上传文件 首先了解一下 request.FILES : 字典 request.FILES 中的每一个条目都是一个UploadFile对象.UploadFile对象有 ...