详解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图片轮播效果的原理简介，希望能够帮助大家，真正的做到学以致用。