这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇利用 JS 实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢?
1.html 页面布局如图所示:
Main(div)
|
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 实现点击按钮后图片自动切换的简单方法全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0527/330960.html