详解js图片轮播效果实现原理


Posted in Javascript onDecember 17, 2015

本文实例讲述了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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
解析Vue.js中的组件
Feb 02 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 #Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 #Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 #Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
You might like
php中stream(流)的用法
2014/03/25 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
scrapy爬虫实例分享
2017/12/28 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
pandas数据集的端到端处理
2019/02/18 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
小学教师国培感言
2014/02/08 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
园艺师求职信
2014/03/10 职场文书
护士节活动总结
2014/08/29 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
党员承诺书格式范文
2015/04/28 职场文书
早安问候语大全
2015/11/10 职场文书
《社戏》教学反思
2016/02/22 职场文书