一个简易的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 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
万年牢教学反思
2014/02/15 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
贷款担保书
2015/01/20 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android