一个简易的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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
js 页面输出值
Nov 30 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
js调试系列 初识控制台
Jun 18 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
React diff算法的实现示例
Apr 20 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
浅谈Node.js 中间件模式
Jun 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
社会实践自我鉴定
2013/11/07 职场文书
高中生操行评语
2014/04/25 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
政府会议通知范文
2015/04/15 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python