请问，怎样用Javascript实现文字和图片同时切换？
我想使用JavaScript编一个效果。就是通过一个按钮，使图片按顺序切换，图片切换的同时，对图片进行描述的文字也同时改变。图片切换我会写，大概是下面这个样子的。<!DO...
我想使用JavaScript编一个效果。就是通过一个按钮，使图片按顺序切换，图片切换的同时，对图片进行描述的文字也同时改变。图片切换我会写，大概是下面这个样子的。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>sample</title>
<script type="text/javascript">
var i=0;
function a()
{
i++;
if(i==21) i=0;
document.image.src="b"+i+".png";
}
</script>
</head>
<body>
<center>
<img name="image" src="b0.png" width="480" height="480">
<form>
<input type="button" value="next" onclick="a()"/>
</form>
</center>
</body>
</html>
但是我不会使对图片描述的文字进行切换。比如这组描述是下面这样
var number=Array("描述1", "描述2", "描述2", "描述4", "描述5", "描述6", "描述7", "描述8", "描述9", "描述10", "描述11", "描述12", "描述13", "描述14", "描述15", "描述16", "描述17", "描述18", "描述19", "描述20")
怎样写，才能使这个描述和图片一起变，就是按一下按钮，图片1变成图片2，描述1变成描述2，一次类推。 展开
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>sample</title>
<script type="text/javascript">
var i=0;
function a()
{
i++;
if(i==21) i=0;
document.image.src="b"+i+".png";
}
</script>
</head>
<body>
<center>
<img name="image" src="b0.png" width="480" height="480">
<form>
<input type="button" value="next" onclick="a()"/>
</form>
</center>
</body>
</html>
但是我不会使对图片描述的文字进行切换。比如这组描述是下面这样
var number=Array("描述1", "描述2", "描述2", "描述4", "描述5", "描述6", "描述7", "描述8", "描述9", "描述10", "描述11", "描述12", "描述13", "描述14", "描述15", "描述16", "描述17", "描述18", "描述19", "描述20")
怎样写，才能使这个描述和图片一起变，就是按一下按钮，图片1变成图片2，描述1变成描述2，一次类推。 展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>sample</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
margin: auto;
width: 300px;
}
</style>
<script type="text/javascript">
var i = 0;
var infos = ["描述1", "描述2", "描述2", "描述4", "描述5", "描述6", "描述7", "描述8", "描述9", "描述10", "描述11", "描述12", "描述13", "描述14", "描述15", "描述16", "描述17", "描述18", "描述19", "描述20"];
function a() {
i++;
i = i > infos.length - 1 ? 0 : i;
document.image.src = "b" + i + ".png";
info.innerHTML = infos[i];
}
</script>
</head>
<body>
<div class="wrap">
<img name="image" src="b0.png" width="480" height="480" />
<div id="info"></div>
<input type="button" value="next" onclick="a()" />
</div>
</body>
</html>
追问
太感谢了，就是我想要的那种效果。 我想问下，i = i > infos.length - 1 ? 0 : i; 这个是什么意思？因为课堂上要把这个编码解释一下，所以我想问下这个是什么意思，为什么这么写。 还有，请问，设定描述的字体大小和颜色吗？怎么设定？ 十分感谢！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
