利用js實(shí)現(xiàn)簡單的動畫效果

js簡介

JavaScript 是世界上最流行的編程語言。

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

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

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

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

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

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

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

來實(shí)現(xiàn)如下的頁面功能

點(diǎn)擊下一張

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

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

1.對數(shù)組的操作，用數(shù)組來存放img的src。附上一張簡單的數(shù)組的添加刪除

2.DOM中使用 document.getElementsByTagName 來獲取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代碼段如下 對于js初學(xué)者只需要熟悉對數(shù)組的操作

以及對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è)置一個簡單的計(jì)時器來實(shí)現(xiàn)自動切換；

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

代碼如下：

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切换图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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