这篇文章主要为大家详细介绍了js图片轮播效果实现原理，帮助大家更好地实现图片轮播效果，真正理解图片轮播原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例讲述了js图片轮播效果实现原理，分享给大家供大家参考，具体内容如下
<!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; //设置图片src的属性，实现图片的切换 image.src = images[i].src; } function pre(){ if (current <= 0){ alert('已经是第一张了'); }else{ current--; setSrc(current); } } function next(){ if (current >= 5){ alert('已经是最后一张了'); }else{ current++; setSrc(current); } } function play(){ if (current >= 5){ current = 0; } setSrc(++current); } </script> <body> <input type="button" value="第一张"> <input type="button" value="上一张"> <input type="button" value="下一张"> <input type="button" value="最后一张"> <input type="button" value="幻灯播放"> <input type="button" value="停止播放"> <div> <img src="https://www.jb51.net/pictures/1.jpg" /> </div> </body> </html>
原理在这呐
首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！
精彩专题分享：
以上就是js图片轮播效果代码，以及实现js图片轮播效果的原理简介，希望能够帮助大家，真正的做到学以致用。
您可能感兴趣的文章: