如何用JS實(shí)現(xiàn)輪播圖效果?
網(wǎng)友解答: 首先創(chuàng)建一個html文件,下圖中我創(chuàng)建的是html5的,所以看起來很簡單。然后在html的主體部分添加一個div標(biāo)簽,然后在該標(biāo)簽下添加一個img標(biāo)簽,并設(shè)置img的寬高。然
首先創(chuàng)建一個html文件,下圖中我創(chuàng)建的是html5的,所以看起來很簡單。
然后在html的主體部分添加一個div標(biāo)簽,然后在該標(biāo)簽下添加一個img標(biāo)簽,并設(shè)置img的寬高。
然后我們可以在html頭部標(biāo)題下添加css樣式代碼來控制div的顯示效果。
接下來在body標(biāo)簽中添加js的事件onload,也就是加載該頁面的時候,調(diào)用onload的值對應(yīng)的方法,圖中的話就是init()。
再為img添加一個id屬性,這樣我們可以通過getElementById("id值")來得到該元素標(biāo)簽。
然后通過<script標(biāo)簽中,添加如下圖代碼,完成輪播的功能。其中
setInterval(code,time);//兩個參數(shù)都是必須的,其中code是執(zhí)行的方法或者代碼串,time是時間間隔(以毫秒計,1000就是1秒,根據(jù)需要來調(diào)整)。
其中if語句中i的值跟圖片的數(shù)量和命名有關(guān)。
完成之后,通過瀏覽器去運(yùn)行就可以看到效果,它會自動切換圖片,也就是輪播圖了。
(gif圖可能因?yàn)樯蟼骶W(wǎng)站的原因會有些不一樣。比如我在預(yù)覽的時候就會有圖片變大,但其實(shí)運(yùn)行是時候,以及本地查看gif圖的時候是圖片都一樣大的。)