一个简易的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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
vue-axios使用详解
May 10 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
vue-cli常用设置总结
Feb 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
浅谈克隆 JavaScript
Nov 02 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概述.
2006/10/09 PHP
PHP新手上路(七)
2006/10/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
js中有关IE版本检测
2012/01/04 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
Vue程序调试的方法
2019/06/17 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python 日志 logging模块详细解析
2020/03/31 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
详解python tcp编程
2020/08/24 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
逃课上网检讨书
2014/02/20 职场文书
高中生职业规划范文
2014/03/09 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
人事任命书范文
2014/06/04 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书