这篇文章主要介绍了 js 图片轮播效果实现原理,帮助大家更好地实现图片轮播效果,真正理解图片轮播原理,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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 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() 函数用于初始化 images 数组和 image 的值,本例中主要是利用 setSrc() 设置图片的 src 属性值,这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500) 的意思是每 0.5s 调用一次 play() 函数!
以上就是 js 图片轮播效果代码,以及实现 js 图片轮播效果的原理简介,希望能够帮助大家,真正的做到学以致用。
来源: