利用js實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果

js簡(jiǎn)介

JavaScript 是世界上最流行的編程語(yǔ)言。

這門語(yǔ)言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。

JavaScript 是一種輕量級(jí)的編程語(yǔ)言。

JavaScript 是可插入 HTML 頁(yè)面的編程代碼。

JavaScript 插入 HTML 頁(yè)面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

JavaScript 很容易學(xué)習(xí)。

話不多說下面我們就來(lái)點(diǎn)硬貨通過用js

目前我所知道的js中實(shí)現(xiàn)js動(dòng)畫的主要有兩種方式，第一種是通過一張大的背景圖片，然后通過不斷的更換背景圖片的位置來(lái)實(shí)現(xiàn)動(dòng)畫；

還有一種是接下來(lái)要說是另外一種是通過不斷改變img的src地址來(lái)實(shí)現(xiàn)動(dòng)畫的效果；這種方式是不推薦的不過，小白白可以學(xué)習(xí)下；

來(lái)實(shí)現(xiàn)如下的頁(yè)面功能

點(diǎn)擊下一張

通過點(diǎn)擊上一張和下一張來(lái)切換圖片

用到的知識(shí)點(diǎn)有

1.對(duì)數(shù)組的操作，用數(shù)組來(lái)存放img的src。附上一張簡(jiǎn)單的數(shù)組的添加刪除

2.DOM中使用 document.getElementsByTagName 來(lái)獲取a標(biāo)簽和img標(biāo)簽的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;}

>重點(diǎn)是js代碼段如下 對(duì)于js初學(xué)者只需要熟悉對(duì)數(shù)組的操作

以及對(duì)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;

}

最后可以設(shè)置一個(gè)簡(jiǎn)單的計(jì)時(shí)器來(lái)實(shí)現(xiàn)自動(dòng)切換；

>可以用異步函數(shù)settimeout以及setinterval來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)中的圖片切換

代碼如下：

setInterval(function(){

srcs.unshift(srcs.pop())

for(var i = 0;i

{

imgs[i].src=srcs[i]

}

return false;

},5000)

> 同樣也可以用settiomout實(shí)現(xiàn)，有興趣的可以學(xué)習(xí)下；

下面附帶的有鏈接：

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

總結(jié)

以上是生活随笔為你收集整理的html简单的图片切换js,一分钟让你学会如何使用js切换图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。