详解js图片轮播效果实现原理
本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Inserttitlehere</title> </head> <scripttype="text/javascript"> vartimeID; varimage; varcurrent=0; varimages=newArray(5); functioninit(){ for(vari=1;i<=5;i++){ images[i]=newImage(450,550); images[i].src="pictures/"+i+".jpg"; } image=document.images[0]; } functionsetSrc(i){ current=i; //设置图片src的属性,实现图片的切换 image.src=images[i].src; } functionpre(){ if(current<=0){ alert('已经是第一张了'); }else{ current--; setSrc(current); } } functionnext(){ if(current>=5){ alert('已经是最后一张了'); }else{ current++; setSrc(current); } } functionplay(){ if(current>=5){ current=0; } setSrc(++current); } </script> <bodyonload="init()"> <inputtype="button"value="第一张"onclick="setSrc(1)"> <inputtype="button"value="上一张"onclick="pre()"> <inputtype="button"value="下一张"onclick="next()"> <inputtype="button"value="最后一张"onclick="setSrc(5)"> <inputtype="button"value="幻灯播放"onclick="timeID=setInterval('play()',500)"> <inputtype="button"value="停止播放"onclick="clearInterval(timeID)"> <divstyle="border:1pxsolidblue;width:450px;height:550px;"id="myPic"> <imgsrc="pictures/1.jpg"/> </div> </body> </html>
原理在这呐
首先init()函数用于初始化images数组和image的值,本例中主要是利用setSrc()设置图片的src属性值,这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500)的意思是每0.5s调用一次play()函数!
精彩专题分享:jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是js图片轮播效果代码,以及实现js图片轮播效果的原理简介,希望能够帮助大家,真正的做到学以致用。