一个简易的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中void(0)的具体含义解释
Feb 27 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
Javascript玩转继承(二)
May 08 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
浅析vue-router原理
Oct 19 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 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
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
js 内存释放问题
2010/04/25 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Django 外键的使用方法详解
2019/07/19 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
新任教师自我鉴定
2014/02/24 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
逃课检讨书
2015/01/26 职场文书
汽车转让协议书
2015/01/29 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
银行催款通知书
2015/04/17 职场文书
与死神共舞观后感
2015/06/15 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python