js中控制图片的循环播放

原创 2016年05月31日 08:33:47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testbtu1(){
document.getElementById("image").src="../images/img/igloo-800_1x.jpg";
};
function testbtu2() {
document.getElementById("image").src="../images/img/render1_1x.jpg";
};
function testbtu3() {
document.getElementById("image").src="../images/img/space_1x.jpg";
};
function testbtu4() {
document.getElementById("image").src="../images/img/trees_1x.jpg";
};
var s=new Array("../images/img/igloo-800_1x.jpg","../images/img/render1_1x.jpg","../images/img/space_1x.jpg","../images/img/trees_1x.jpg");
var index=0;
function xunhuan() {
         imageCanvas = document.getElementById('image');
         imageCanvas.src=s[index];
         if(index >=4)
          {index=0;}
          else
           {index++;}
if(index!=0){
             window.setTimeout(xunhuan,3000); 
}
else{
window.setTimeout(xunhuan,0)}
}

</script>
<style type="text/css">
#but1 {
position: absolute;
left: 250px;
top: 280px;
}
#but2 {
position: absolute;
left: 290px;
top: 280px;
}
#but3 {
position: absolute;
left: 330px;
top: 280px;
}
#but4 {
position: absolute;
left: 370px;
top: 280px;
}
</style>
</head>
<body onLoad="xunhuan();">
<img src="../images/img/igloo-800_1x.jpg" alt="" id="image">
<input type="button" value="1" id="but1" onclick="testbtu1();">
<input type="button" value="2" id="but2" onclick="testbtu2();">
<input type="button" value="3" id="but3" onclick="testbtu3();">
<input type="button" value="4" id="but4" onclick="testbtu4();">
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

js图片自动循环播放

js图片自动循环播放 1.实现图片自动循环播放; 2.单击数字按钮时跳转对应图片; 3.左一张,右一张按钮单击时,显示相应的图片;...
  • qq_26445509
  • qq_26445509
  • 2016年05月24日 22:49
  • 2226

JS实现的图片循环播放浏览框

显现效果如图所示 先大体讲下实现的功能 1.首先是每过5000ms,如上所示的图中,三个img控件会进行图片变化,左边的小img控件所显示的是中间img控件所显示图片的上一张图片(相对于文件夹内而...
  • yeyinglingfeng
  • yeyinglingfeng
  • 2016年03月08日 17:36
  • 2076

学习Unity3D之弹力和循环播放图片。

欢迎来到unity学习、unity培训、unity企业培训教育专区,这里有很多U3D资源、U3D培训视频、U3D教程、U3D常见问题、U3D项目源码,我们致力于打造业内unity3d培训、学习第一品牌...
  • caoboya
  • caoboya
  • 2015年01月11日 00:12
  • 1323

iOS-循环图片播放

公司项目中有个场景,有几个view,可以循环播放看。 第一印象就是这玩意简单爆了,UIScrollView,不要太简单,任性点,跟着自己的感觉来 - (void)scrollViewDid...
  • montivan
  • montivan
  • 2016年03月14日 23:19
  • 535

<html5+css3+js>javascript实现图片滚动播放功能

html5: ...
  • qq_17615475
  • qq_17615475
  • 2016年01月07日 10:05
  • 3779

js实现图片顺序播放和循环播放

效果图如下所示: 代码如下:   lang="en">     charset="UTF-8">   图片切...
  • srj15110129498
  • srj15110129498
  • 2017年08月08日 13:40
  • 182

网页图片循环滚动播放效果

图片:http://download.csdn.net/detail/richard_jason/9669814 效果图: 示例代码(HTML): *...
  • Richard_Jason
  • Richard_Jason
  • 2016年11月01日 11:42
  • 1036

Unity-ScrollRect-循环播放图片(确实没有转载是真的)

都在代码和代码注释里了 using System.Collections; using System.Collections.Generic; using UnityEngine; using ...
  • qq_32844667
  • qq_32844667
  • 2017年10月21日 10:39
  • 210

ViewPager循环滑动及自动播放

对于经常使用viewpager的人,应该清楚一般的viewpager在滑动到最右端或者最左端时,就不能继续往下滑动了,从用户的角度来看,这点的体验很不好,用户可能期待的是当我滑动到最后一页的时候,可以...
  • xingxing_yan
  • xingxing_yan
  • 2016年02月15日 16:29
  • 1100

js_for循环应用之生成轮播

目的:使用 for循环生成轮播图(如图) 步骤: 获取每个需要的元素 将图片装入数组中,使用数组的下标获取图片 申请变量,通过改变变量,获取数组里面的图...
  • aiyoquickly
  • aiyoquickly
  • 2016年12月18日 18:49
  • 897
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中控制图片的循环播放
举报原因:
原因补充:

(最多只允许输入30个字)