JavaScript
JavaScript（简称“JS”）是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台。JavaScript应用非常广泛，可以被用于开发中的很多领域，实现相应功能。下面本文将通过一个完整的项目实例来演示如何使用JavaScript实现点击相应按钮，完成切换图片的功能。
基本HTML代码
首先，页面的基本结构包含一个大的div，里面包含一个id信息，用于表示当前是第几张图片，然后是需要切换的图片，以及两个按钮，分别用于控制实现点击切换上一张、下一张的效果。
<body>
<div id="outer">
<p id="info"></p>
<img src="image/dahuangmao-01.png" alt="cat1"><br>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
CSS样式
然后简单设置一下样式。
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
height: 200px;
margin: 50px auto;
padding: 10px;
background-color: pink;
text-align: center;
}
img{
width: 130px;
padding-bottom: 30px;
}
通过JS实现相应功能
首先先获取两个按钮，然后获取img标签，并创建一个数组，用来保存图片的路径，还要创建一个变量，来保存当前正在显示的图片的索引。设置提示文字，用来显示一共有多少张图片，并展示当前是第几张。要切换图片就是要修改img标签的src属性，所以最后给两个按钮绑定两个函数，分别实现相应功能，并修改对应的info信息。
window.onload=function(){
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var img=document.getElementsByTagName("img")[0];
var imgArr=["image/dahuangmao-01.png","image/dahuangmao-02.png","image/dahuangmao-03.png","image/dahuangmao-04.png","image/dahuangmao-05.png"];
var index=0;
var info=document.getElementById("info");
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
prev.onclick=function(){
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
next.onclick=function(){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
};
结论
本文通过一个小的项目实例演示了一下使用js实现点击按钮切换图片的功能，可以看出Javascript可以处理复杂的信息，实现人与网页之间的交互，方便操作和使用，还可以与其他Web开发框架和开发语言一起使用，像我们所浏览到的网页基本都是由html、css和Javascript构成的，可以一起创建美观又实用的网站。简单来说，Javascript优势如下：
- 解释性语言，在使用前不需要事先编译，在程序运行过程中直接被逐行解释。
- 事件驱动，实现人与网页的交互，对用户的一些像点击鼠标，点击按钮，按下键盘等事件进行响应。当这些事件发生后，就可以响应对应的事件，并执行对应的操作。
- 弱类型，js很大一部分的语法同Java语言很相似，不过其变量没有使用严格的数据类型，易于开发。
- 跨平台，使用js不需要配置特殊的运行环境，只要客户端能装有支持JavaScript的浏览器，就可正确执行javaScript脚本。
