详解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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
vue 组件开发原理与实现方法详解
Nov 29 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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,不用COM,生成excel文件
2006/10/09 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php include类文件超时问题处理
2015/02/06 PHP
php查询内存信息操作示例
2019/05/09 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python 系统调用的实例详解
2017/07/11 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python实现翻译word表格小程序
2020/02/27 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
校友会欢迎辞
2014/01/13 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
购房协议书
2014/04/11 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2016年五一促销广告语
2016/01/28 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android