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

我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？
1.HTML页面布局如图所示：

Main（div）

top（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 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实现点击按钮后图片自动切换的简单方法全部内容了，希望大家多多支持脚本之家~