一个简易的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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
用Javascript实现发送短信验证码间隔功能
Feb 08 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php使用PDO方法详解
2014/12/27 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
用javascript自动显示最后更新时间
2007/03/15 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python提取网页中超链接的方法
2016/09/18 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 调用有道api接口的方法
2019/01/03 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python将数组n等分的实例
2019/12/02 Python
python 爬取疫情数据的源码
2020/02/09 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
基于python实现对文件进行切分行
2020/04/26 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
python的变量和简单数字类型详解
2021/09/15 Python