利用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 相关文章推荐
js数组去重的常用方法总结
Jan 24 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
利用ctypes提高Python的执行速度
2016/09/09 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python对切片命名的实现方法
2018/10/16 Python
Python读写文件基础知识点
2019/06/10 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
利用python在excel中画图的实现方法
2020/03/17 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
农行实习自我鉴定
2013/09/22 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
网站创业计划书
2014/04/30 职场文书
设计顾问服务计划书
2014/05/04 职场文书
小学运动会演讲稿
2014/08/25 职场文书
2015年司法所工作总结
2015/04/27 职场文书