一个简易的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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
Angular表单验证实例详解
Oct 20 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python内置函数delattr的具体用法
2017/11/23 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
详解python中index()、find()方法
2019/08/29 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
初中美术教学反思
2014/01/29 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers