一个简易的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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
javascript实现日期格式转换
Dec 16 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Javascript Promise用法详解
May 10 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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
数字转英文
2006/12/06 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
企业办公室岗位职责
2014/03/12 职场文书
期中考试后的感想
2015/08/07 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python