利用JS实现点击按钮后图片自动切换的简单方法


Posted in Javascript onOctober 24, 2016

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

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

Main(div) top(div)(显示需要显示的图片) bottomUL (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="images/left.jpg"/></div>

<div class="center" id="center"><img src="images/center.jpg"/></div>

<div class="right" id="right"><img src="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实现点击按钮后图片自动切换的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
express文件上传中间件Multer详解
Oct 24 #Javascript
用js实现博客打赏功能
Oct 24 #Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 #Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 #Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 #Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 #Javascript
js实现上传文件添加和删除文件选择框
Oct 24 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
理解javascript异步编程
2016/01/27 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
应付会计岗位职责
2013/12/12 职场文书
情人节活动策划方案
2014/02/27 职场文书
体育之星事迹材料
2014/05/11 职场文书
学习张林森心得体会
2014/09/10 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2014年民警工作总结
2014/11/25 职场文书
信访维稳承诺书
2015/05/04 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL