一分钟让你学会如何使用js切换图片

Javascript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

Javascript 是一种轻量级的编程语言。
Javascript 是可插入 HTML 页面的编程代码。
Javascript 插入 HTML 页面后，可由所有的现代浏览器执行。
Javascript 很容易学习。

目前我所知道的js中实现js动画的主要有两种方式，第一种是通过一张大的背景图片，然后通过不断的更换背景图片的位置来实现动画；

还有一种是接下来要说是另外一种是通过不断改变img的src地址来实现动画的效果；这种方式是不推荐的不过，小白白可以学习下；
来实现如下的页面功能

点击下一张

通过点击上一张和下一张来切换图片

用到的知识点有


1.对数组的操作，用数组来存放img的src。附上一张简单的数组的添加删除

2.DOM中使用 document.getElementsByTagName 来获取a标签和img标签的id

最后附上我写的代码 段如下

html代码段如下

上一张

下一张

样式表如下

.content{
width: 800px;
height: 400px;
overflow: hidden;
}
.content ul{
width: 400px;
list-style: none;

    }
     .content ul img{height: 400px;vertical-align: middle;}
    a{display: block;font-size: 20px;
    text-decoration: none;
    height: 40px;
    padding-left: 80px;margin-top: 50px;}

>重点是js代码段如下 对于js初学者只需要熟悉对数组的操作
以及对Dom中document.getElementsByTagName的使用就ok了

var srcs = ["./img/lif1.jpg","./img/lyf2.jpg","./img/lif3.jpg"];

var imgs = document.getElementsByTagName("img");
var as = document.getElementsByTagName("a");
as[0].=function(){

    srcs.unshift(srcs.pop())

    for(var i = 0;i 

 最后可以设置一个简单的计时器来实现自动切换；

>可以用异步函数settimeout以及setinterval来实现网页中的图片切换
代码如下：

    setInterval(function(){
 srcs.unshift(srcs.pop())
    for(var i = 0;i  同样也可以用settiomout实现，有兴趣的可以学习下；
    下面附带的有链接：

[settimeout使用](http://www.w3school.com.cn/js/js_timing.asp)