利用JS实现点击按钮后图片自动切换的简单方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了利用JS实现点击按钮后图片自动切换的简单方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2313字,纯文字阅读大概需要4分钟。
内容图文
![利用JS实现点击按钮后图片自动切换的简单方法](/upload/InfoBanner/zyjiaocheng/390/f129522098ea487e9a0005e7b09d44fe.jpg)
1.HTML页面布局如图所示:
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实现点击按钮后图片自动切换的简单方法全部内容,希望文章能够帮你解决利用JS实现点击按钮后图片自动切换的简单方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。