一个简易的js图片轮播效果


Posted in Javascript onJuly 22, 2017

一个简易的js图片轮播效果,话不多说,代码献上.
只有img标签的html代码,做测试用:

<body> 
<img src="images/class1-1.jpg" id="img"> 
</body>

下面是js代码:

var k=0;  //当前的索引
var ss = new Array(); //数组,用来存放图片
ss[0] = "images/class1-1.jpg";
ss[1] = "images/class1-2.jpg";
ss[2] = "images/class1-3.jpg";
ss[3] = "images/class1-4.jpg";
function scrollPic(){ 
  if(k>ss.length-1){ //如果当前函数超过数组下标的最大值,k=0
    k=0;
  }
  for(var i=0;i<ss.length;i++){ //遍历数组
    if(i==k){ //如果当前索引等于当前数组下标
              document.getElementById("img").src=ss[i]; //改变图片路径
      }
    }
    k++; //k++,执行下一次操作
  }

setInterval("scrollPic()",1000); //设置定时器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
基于JS脚本语言的基础语法详解
Jul 22 #Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 #Javascript
JS+HTML5实现图片在线预览功能
Jul 22 #Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
JS原生带小白点轮播图实例讲解
Jul 22 #Javascript
JS按钮闪烁功能的实现代码
Jul 21 #Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python判断有效的数独算法示例
2019/02/23 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python支持多线程的爬虫实例
2019/12/21 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
公司总经理工作职责管理办法
2014/02/28 职场文书
岗位明星事迹材料
2014/05/18 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
硕士学位论文评语
2014/12/31 职场文书
行政前台岗位职责
2015/04/16 职场文书