一个简易的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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
基于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支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
深入浅析Python代码规范性检测
2020/07/31 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
先进单位申报材料
2014/12/25 职场文书
撤诉书怎么写
2015/05/19 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书