基于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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
js实现聊天对话框
2020/02/08 Javascript
Vue实现简易计算器
2020/02/25 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python3 下载网络图片代码实例
2019/08/27 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
Python合并pdf文件的工具
2021/07/01 Python