一个简易的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 获取表单file全路径
Dec 31 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
js实现电灯开关效果
Jan 19 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 str_pad 函数用法简介
2009/07/11 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
页面中js执行顺序
2009/11/09 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python语言快速上手学习方法
2018/12/14 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
大学生找工作推荐信范文
2013/11/28 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
办公室禁烟通知
2015/04/23 职场文书
二手房购房意向书
2015/05/09 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书