一个简易的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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
JavaScript继承与聚合实例详解
Jan 22 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多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP连接access数据库
2015/03/27 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Python函数学习笔记
2008/10/07 Python
python封装对象实现时间效果
2020/04/23 Python
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python实现媒体播放器功能
2018/02/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
经典c++面试题五
2014/12/17 面试题
英语国培研修感言
2014/02/13 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
本科毕业生求职信
2014/06/15 职场文书
宾馆安全管理制度
2015/08/06 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript