利用js实现简单的动画效果

js简介

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

话不多说下面我们就来点硬货通过用js

目前我所知道的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

{

imgs[i].src=srcs[i]

}

return false;

}

as[1].=function(){

srcs.push(srcs.shift())

{

} for(var i = 0;i

{

imgs[i].src=srcs[i]

}

return false;

}

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

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

代码如下：

setInterval(function(){

srcs.unshift(srcs.pop())

for(var i = 0;i

{

imgs[i].src=srcs[i]

}

return false;

},5000)

> 同样也可以用settiomout实现，有兴趣的可以学习下；

下面附带的有链接：

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