一个简易的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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
汽车专业求职信
2014/06/05 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
聘任书范文大全
2015/09/21 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技