詳解js圖片輪播效果實(shí)現(xiàn)原理
本文實(shí)例講述了js圖片輪播效果實(shí)現(xiàn)原理,分享給大家供大家參考,具體內(nèi)容如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script type="text/javascript"> var timeID; var image; var current = 0; var images = new Array(5); function init(){ for (var i=1;i<=5;i++){ images[i] = new Image(450,550); images[i].src = "pictures/"+i+".jpg"; } image = document.images[0]; } function setSrc(i){ current = i; //設(shè)置圖片src的屬性,實(shí)現(xiàn)圖片的切換 image.src = images[i].src; } function pre(){ if (current <= 0){ alert('已經(jīng)是第一張了'); }else{ current--; setSrc(current); } } function next(){ if (current >= 5){ alert('已經(jīng)是最后一張了'); }else{ current++; setSrc(current); } } function play(){ if (current >= 5){ current = 0; } setSrc(++current); } </script> <body onload="init()"> <input type="button" value="第一張" onclick="setSrc(1)"> <input type="button" value="上一張" onclick="pre()"> <input type="button" value="下一張" onclick="next()"> <input type="button" value="最后一張" onclick="setSrc(5)"> <input type="button" value="幻燈播放" onclick="timeID=setInterval('play()',500)"> <input type="button" value="停止播放" onclick="clearInterval(timeID)"> <div style="border:1px solid blue;width:450px; height:550px;" id="myPic"> <img src="pictures/1.jpg" /> </div> </body> </html>
原理在這吶
首先init()函數(shù)用于初始化images數(shù)組和image的值,本例中主要是利用setSrc()設(shè)置圖片的src屬性值,這樣就達(dá)到了圖片的切換,圖片的輪播是使用定時(shí)器來時(shí)顯的!setInterval('play()',500)的意思是每0.5s調(diào)用一次play()函數(shù)!
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是js圖片輪播效果代碼,以及實(shí)現(xiàn)js圖片輪播效果的原理簡介,希望能夠幫助大家,真正的做到學(xué)以致用。
相關(guān)文章
js+html實(shí)現(xiàn)周歲年齡計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)周歲年齡計(jì)算器的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JS實(shí)現(xiàn)給數(shù)組對象排序的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)給數(shù)組對象排序的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組對象排序相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-06-06