基于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 相关文章推荐
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
js编写简易的计算器
Jul 29 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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自毁程序(慎用)
2015/07/09 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP7 list() 函数修改
2021/03/09 PHP
JavaScript包装对象使用介绍
2013/08/29 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
全面了解python字符串和字典
2016/07/07 Python
浅谈Python基础之I/O模型
2017/05/11 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
总经理秘书工作职责
2013/12/26 职场文书
大学生创业感言
2014/01/25 职场文书
个性发展自我评价
2014/02/11 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
立项申请报告范本
2015/05/15 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL