-
JS中切换图片
Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
//定义一个数组，用来保存图片路径
var a = new Array();
//给每个数组元素赋值
a[0]='1.jpg';
a[1]= '2.jpg';
a[2] = '3.jpg';
//定义一个循环变量，用来控制数组的索引
var m = 0;
//图片切换的方法
function chang(v)
{
//数组索引自增
m++;
if(v!=null)
{
m = v;
document.getElementById("img111").src=a[m];
return;
}
//当数组索引值为3视，把它变为0，即当是第三张图片时，把它的索引转到第一张图片上
if(m==3)
{
m=0;
}
var id = document.getElementById("id"+m);
id.innerHTML="m";
m==0?id.innerHTML = 1:(m==1?id.innerHTML=2:id.innerHTML=3);
//设置img标签的图片路径为数组当前的元素
document.getElementById("img111").src=a[m];
//等待一秒钟，回调chang()方法。
setTimeout("chang()",3000);
}
//setInterval("chang()",1000);
</script>
</head>
<body onload="chang()">
<form id="form1" runat="server">
<div>
<img alt="" id="img111" src="1.jpg"/>
<br />
<button id="id0" onclick="chang(0)" style="20px">1</button>
<button id="id1" onclick="chang(1)" style="20px">2</button>
<button id="id2" onclick="chang(2)" style="20px">3</button>
</div>
</form>
</body>
</html>
-
相关阅读:
原始字符串
.Net Core 常见错误解决记录
P1010 幂次方 P1022 计算器的改良
P1036 选数
广度优先遍历
P4327 彼得潘框架
链表
标准库与标准模板库
信息学竞赛打表犯规吗？
对拍程序
-
原文地址：https://www.cnblogs.com/tangtang615/p/JavaScript.html
Copyright © 2020-2023
润新知