javascript讓圖片自動(dòng)變換的方法

這篇文章主要介紹了javascript讓圖片自動(dòng)變換的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

方法：1、創(chuàng)建圖片路徑數(shù)組；2、用timeInterval定義切換時(shí)間，setInterval()設(shè)置時(shí)間定時(shí)執(zhí)行函數(shù)；3、獲得img對(duì)象，設(shè)初始curIndex，if語(yǔ)句比較圖片名稱，實(shí)現(xiàn)不斷改變圖片名稱進(jìn)而改變圖片路徑，實(shí)現(xiàn)切換效果。

JavaScript讓圖片自動(dòng)變換的方法

1、新建一個(gè)html文件，命名為test.html，用于講解怎樣用javascript實(shí)現(xiàn)圖片定時(shí)切換。

2、在test.html，使用img標(biāo)簽創(chuàng)建一張圖片的顯示，并且設(shè)置其id屬性為obj，方便下面獲得該元素對(duì)象。

3、在test.html頁(yè)面的script標(biāo)簽內(nèi)，使用new Array（）創(chuàng)建一個(gè)圖片路徑的數(shù)組，里面放三張圖片的文件名。

4、在test.html頁(yè)面的script標(biāo)簽內(nèi)，使用變量timeInterval定義圖片切換的時(shí)間為1秒，通過setInterval（）定時(shí)器方法設(shè)置每秒鐘執(zhí)行一次changeImg（）函數(shù)。

5、在changeImg（）函數(shù)內(nèi)，使用document.getElementById（）方法獲得img對(duì)象，設(shè)置一個(gè)初始curIndex變量，通過if語(yǔ)句比較圖片的名稱，實(shí)現(xiàn)不斷改變圖片的名稱。

注：圖片的名稱必須為0，1，2等有序的數(shù)字。

6、在changeImg（）函數(shù)內(nèi)，將上一步獲得的圖片名稱用來(lái)改變img的圖片路徑，最終實(shí)現(xiàn)圖片的定時(shí)切換。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript讓圖片自動(dòng)變換的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!