基于javascript数组实现图片轮播


Posted in Javascript onMay 02, 2016

图片轮播的办法有多种,在这里介绍一种简单的:js数组实现。

首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片

<script type="text/javascript"> 
 var curIndex = 0; 
 var timeInterval = 1000; 
 var arr = new Array(); 
 arr[0] = "1.png"; 
 arr[1] = "2.png"; 
 arr[2] = "3.png"; 
 arr[3] = "4.png"; 
 arr[4] = "5.png"; 
 setInterval(changeImg,timeInterval); 
 function changeImg() { 
  var obj = document.getElementById("imge"); 
  if (curIndex == arr.length-1) { 
   curIndex = 0; 
  } else { 
   curIndex += 1; 
  } 
  obj.src = arr[curIndex]; 
 } 
 </script>

完整实例如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>使用数组实现图片自动轮播</title> 
 <style type="text/css">
 #main{
  width: 700px;
  height: 450px;
  margin: 0 auto;
  text-align: center;
 }
 </style>
 <script type="text/javascript"> 
 var curIndex = 0; 
 var timeInterval = 1000; 
 var arr = new Array(); 
 arr[0] = "1.png"; 
 arr[1] = "2.png"; 
 arr[2] = "3.png"; 
 arr[3] = "4.png"; 
 arr[4] = "5.png"; 
 setInterval(changeImg,timeInterval); 
 function changeImg() { 
  var obj = document.getElementById("imge"); 
  if (curIndex == arr.length-1) { 
   curIndex = 0; 
  } else { 
   curIndex += 1; 
  } 
  obj.src = arr[curIndex]; 
 } 
 </script> 
</head> 
<body> 
 <div id="main">
  <h1>使用数组实现图片自动轮播</h1>
  <img id = "imge" src = "1.png" alt="picture" /> 
 </div>
</body> 
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
使用js画图之饼图
Jan 12 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
js判断密码强度的方法
Mar 18 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
You might like
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
js查找父节点的简单方法
2008/06/28 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
vuejs如何配置less
2017/04/25 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python实时监控cpu小工具
2018/06/21 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
日语专业推荐信
2013/11/12 职场文书
美容院经理岗位职责
2014/04/03 职场文书
求职信格式范文
2015/03/19 职场文书
教师节倡议书2015
2015/04/27 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL