详解js图片轮播效果实现原理
更新时间：2015年12月17日 12:02:51 投稿：lijiao
这篇文章主要为大家详细介绍了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 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()函数！
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是js图片轮播效果代码，以及实现js图片轮播效果的原理简介，希望能够帮助大家，真正的做到学以致用。
相关文章
今天小编就为大家分享一篇关于Javascript之高级数组API的使用实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
在本篇文章里小编给大家分享了关于js取小数点后两位四种方法和实例代码，需要的朋友们学习下。2019-01-01
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
JavaScript中的对象模型(object model)并不广为人知,我们再设想：假设JavaScript没有构造函数或者没有new关键字会怎样？事情又会变成什么样的呢？让我们推到以前的重来,感兴趣的朋友可以详细了解下2013-01-01
这篇文章主要介绍了JavaScript节流和防抖函数的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-08-08
js与jQuery实现获取table中的数据并拼成json字符串操作示例
这篇文章主要介绍了js与jQuery实现获取table中的数据并拼成json字符串操作,涉及javascript与jQuery针对HTML页面table表格数据获取、遍历及json字符串拼接相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要为大家介绍了JavaScript中好用的解构用法操作示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
当对象之间进行多对多引用时，进行开发，维护，阅读时将变得特别痛苦。在这些对象之间添加中间者，使它们都只与中介者，当中介者处理完一个对象的请求后，将结果通知于其他对象2022-08-08
uniapp原生tabbar设置并添加数字角标或小红点提示功能
这篇文章主要给大家介绍了关于uniapp原生tabbar设置并添加数字角标或小红点提示功能的相关资料,在相应的页面中完成对消息的处理,如果有新消息,则在tabBar页面中显示红点提醒用户,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了关于base64编码和解码的js工具函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论