一分鐘讓你學會如何使用js切換圖片

標簽：

Html/CSS Html5 JavaScript

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

js简介

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

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

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

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

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

点击下一张

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

用到的知识点有
<br/>
1.对数组的操作，用数组来存放img的src。附上一张简单的数组的添加删除

<br/>

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

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

html代码段如下


<body>
<a href="">上一张</a>
<div class="content">

<ul>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./img/lif1.jpg" alt=""></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./img/lyf2.jpg" alt=""></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./img/lif3.jpg" alt=""></li>
</ul>

</div>
<a href="">下一张</a>
</body>

样式表如下

    }
     .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;}

</style>


>重点是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.length;i++)
    {
        imgs[i].src=srcs[i]
    }
    return false;
}
as[1].=function(){
    srcs.push(srcs.shift())
    {

    }    for(var i = 0;i <imgs.length;i++)
    {
        imgs[i].src=srcs[i]
    }
    return false;
}



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

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

    setInterval(function(){
        srcs.unshift(srcs.pop())
    for(var i = 0;i <imgs.length;i++)
    {
        imgs[i].src=srcs[i]
    }
    return false;

    },5000)

    > 同样也可以用settiomout实现，有兴趣的可以学习下；
    下面附带的有链接：

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

點擊查看更多內(nèi)容