我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？
1.HTML页面布局如图所示：
Main（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 type="text/css" href="https://www.jb51.net/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> <div> <div><img src="https://www.jb51.net/images/left.jpg"/></div> <div><img src="https://www.jb51.net/images/center.jpg"/></div> <div><img src="https://www.jb51.net/images/right.jpg"/></div> </div> <div> <ul> <li></li> <li></li> <li></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实现点击按钮后图片自动切换的简单方法全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: