一个简易的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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS打印组合功能
2016/08/04 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
VueJS全面解析
2016/11/10 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
python中zip()方法应用实例分析
2016/04/16 Python
python中list列表的高级函数
2016/05/17 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
通过python3实现投票功能代码实例
2019/09/26 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
《槐乡五月》教学反思
2014/04/25 职场文书
广播体操比赛口号
2014/06/10 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang