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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Markdown 中控制图片的大小 对齐方式

通过html元素控制图片展示

js中控制小数点的显示位数的技术整理

js中控制小数点的显示位数的技术整理
  • WYZSC
  • WYZSC
  • 2011-03-16 13:26
  • 18584

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

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

js图片自动循环播放

js图片自动循环播放 1.实现图片自动循环播放; 2.单击数字按钮时跳转对应图片; 3.左一张,右一张按钮单击时,显示相应的图片;

js图片轮播可控制是否循环轮播,点击左右按钮切换

一款功能强大的jquery焦点图插件ScrollPic                          ...

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

效果图如下所示: 代码如下:   lang="en">     charset="UTF-8">   图片切...

在Unity3D中控制动画播放

用Unity3D也算是好久了,但是每次做项目总还是能学到新的东西。这次做一个TPS的项目就遇到了这样一个问题,如何同时在上下半身播放不同的动画?解决方法其实是很简单,但由于对于动画资源的了解不足导致问...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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