一个简易的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脚本代码跑起来。
Jan 09 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
JS精确判断数据类型代码实例
Dec 18 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php pdo操作数据库示例
2017/03/10 PHP
jquery实现的伪分页效果代码
2015/10/29 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
python3连接MySQL数据库实例详解
2018/05/24 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
医大实习自我鉴定
2013/12/07 职场文书
运动会入场解说词
2014/02/07 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2014年财政工作总结
2014/12/10 职场文书
个人典型事迹材料
2014/12/30 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers