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

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. ssl客户端与服务端通信的demo

    服务端程序流程 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <str ...

  2. 中大东校小米路由器mini实现inode上网，ipv6 wifi【中大】【东校】【inode】【ipv6】

    还有不到4个月就要毕业了,前几天半夜没事捣鼓小米路由没想到竟然实现了wifi的ipv6. 正好又安利了同学一台小米路由mini,从刷机到inode到ipv6全搞了一遍. 这里将教程写出来,服务学弟妹. ...

  3. 简单轮播js实现

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...

  4. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

  5. EF里的继承映射关系TPH、TPT和TPC的讲解以及一些具体的例子

    本章节讲解EF里的继承映射关系,分为TPH.TPT.TPC.具体: 1.TPH:Table Per Hierarchy 这是EF的默认的继承映射关系:一张表存放基类和子类的所有列,自动生成的discr ...

  6. [LeetCode] Sort Transformed Array 变换数组排序

    Given a sorted array of integers nums and integer values a, b and c. Apply a function of the form f( ...

  7. [LeetCode] Linked List Cycle II 单链表中的环之二

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Foll ...

  8. jq封装淘宝图片轮播插件

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  9. UDP Server

    //UDP服务器端程序,可以接受广播,不可接受多播,多播需要join播地址@Override public void run() { while (true) { try { DatagramSock ...

  10. 查询SqlServer中每张表的记录数

    select schema_name(t.schema_id) as [ Schema ], t. name as TableName,i. rows as [RowCount] from sys.t ...