一个简易的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操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 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
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript定义类和类的实现实例详解
2015/12/01 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
详解jQuery事件
2017/01/13 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python with语句的原理与用法详解
2020/03/30 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
巴西本土电商平台:Americanas
2020/06/21 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
承认错误的检讨书
2014/01/30 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
统计专业自荐书
2014/07/06 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
化工厂员工工作总结
2015/10/15 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js