一个简易的js图片轮播效果

 更新时间:2017年07月22日 09:03:56   作者:mercuryTan  
这篇文章主要为大家详细介绍了一个简易的js图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一个简易的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); //设置定时器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • echarts自定义饼图数据刷新和颜色渲染问题浅析

    echarts自定义饼图数据刷新和颜色渲染问题浅析

    这篇文章主要给大家介绍了关于echarts自定义饼图数据刷新和颜色渲染问题的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下
    2023-05-05
  • Bootstrap框架动态生成Web页面文章内目录的方法

    Bootstrap框架动态生成Web页面文章内目录的方法

    这篇文章主要介绍了Bootstrap框架动态生成Web页面文章内目录的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以实现,需要的朋友可以参考下
    2016-05-05
  • js实现可键盘控制的简单抽奖程序

    js实现可键盘控制的简单抽奖程序

    这篇文章主要为大家详细介绍了js实现可键盘控制的简单抽奖程序,代码简洁,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 微信小程序实现横向滚动条

    微信小程序实现横向滚动条

    这篇文章主要为大家详细介绍了微信小程序实现横向滚动条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • javascript 数据结构的题

    javascript 数据结构的题

    面试题是3个数据结构的题,可以用java/c/c++/python实现,靠,js也能实现,鄙视js?我上机就用js写的,虽说肯定没戏,但js我挺。
    2008-07-07
  • js实现无缝循环滚动

    js实现无缝循环滚动

    这篇文章主要为大家详细介绍了js实现无缝循环滚动的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理

    这篇文章主要介绍了常见的浏览器Hack技巧整理的相关资料,需要的朋友可以参考下
    2017-06-06
  • JS 强制设为首页的代码

    JS 强制设为首页的代码

    把网站设置为浏览器的首页是我们做网站时经常加到网站顶部的功能!下面这段代码是强制设置为首页的代码!最好别用啊!呵呵!
    2009-01-01
  • JavaScript实现获取两个排序数组的中位数算法示例

    JavaScript实现获取两个排序数组的中位数算法示例

    这篇文章主要介绍了JavaScript实现获取两个排序数组的中位数算法,涉及javascript数组遍历及数值计算相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 小程序实现录音上传功能

    小程序实现录音上传功能

    这篇文章主要为大家详细介绍了小程序实现录音上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论