为什么js代码里的图片切换不了
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{ width: 400px; height: 400px; border: 10px solid gray;margin: 40px auto; position: relative;}
a{ width: 40px; height: 40px; background: gray; line-height: 40px; text-align: center; text-decoration: none; position: absolute; top: 160px;
font-size: 30px;}
#prve{position: absolute; left: 10px;}
#next{ position: absolute;right: 10px;}
#p1,#strong1{ width: 400px; height: 30px; background: black; position: absolute;left: 0; line-height: 30px; text-align: center;font-size: 15px;color: #fff;}
#p1{ position: absolute;bottom: 0; margin: 0;}
#img1{width: 400px; height: 400px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oPrve= document.getElementById('prve');
var oNext= document.getElementById('next');
var oStrong= document.getElementById('strong1');
var oP= document.getElementById('p1');
var oImg= document.getElementById('img1');
var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText=['图片一','图片二','图片三','图片四'];
var num=0;
// function fnTab(){
oImg.src=arrUrl[num];
oStrong.innerHTML=num+1+'/'+arrText.length;
oP.innerHTML=arrText[num];
// };
// fnTab();
oNext.onclick=function(){
num=num+1;
oImg.src=arrUrl[num];
oStrong.innerHTML=num+1+'/'+arrText.length;
oP.innerHTML=arrText[num];
};
};
</script>
</head>
<body>
<div id="box">
<a id="prve" href=""><</a>
<a id="next" href="">></a>
<strong id="strong1">图片计算中....</strong>
<p id="p1">图片说明</p>
<img id="img1">
</div>
</body>
</html>
oNext.onclick,点击之后图片切换不过去 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{ width: 400px; height: 400px; border: 10px solid gray;margin: 40px auto; position: relative;}
a{ width: 40px; height: 40px; background: gray; line-height: 40px; text-align: center; text-decoration: none; position: absolute; top: 160px;
font-size: 30px;}
#prve{position: absolute; left: 10px;}
#next{ position: absolute;right: 10px;}
#p1,#strong1{ width: 400px; height: 30px; background: black; position: absolute;left: 0; line-height: 30px; text-align: center;font-size: 15px;color: #fff;}
#p1{ position: absolute;bottom: 0; margin: 0;}
#img1{width: 400px; height: 400px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oPrve= document.getElementById('prve');
var oNext= document.getElementById('next');
var oStrong= document.getElementById('strong1');
var oP= document.getElementById('p1');
var oImg= document.getElementById('img1');
var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText=['图片一','图片二','图片三','图片四'];
var num=0;
// function fnTab(){
oImg.src=arrUrl[num];
oStrong.innerHTML=num+1+'/'+arrText.length;
oP.innerHTML=arrText[num];
// };
// fnTab();
oNext.onclick=function(){
num=num+1;
oImg.src=arrUrl[num];
oStrong.innerHTML=num+1+'/'+arrText.length;
oP.innerHTML=arrText[num];
};
};
</script>
</head>
<body>
<div id="box">
<a id="prve" href=""><</a>
<a id="next" href="">></a>
<strong id="strong1">图片计算中....</strong>
<p id="p1">图片说明</p>
<img id="img1">
</div>
</body>
</html>
oNext.onclick,点击之后图片切换不过去 展开
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box { width: 400px; height: 400px; border: 10px solid gray; margin: 40px auto; position: relative; }
a { width: 40px; height: 40px; background: gray; line-height: 40px; text-align: center; text-decoration: none; position: absolute; top: 160px; font-size: 30px; }
#prve { position: absolute; left: 10px; }
#next { position: absolute; right: 10px; }
#p1, #strong1 { width: 400px; height: 30px; background: black; position: absolute; left: 0; line-height: 30px; text-align: center; font-size: 15px; color: #fff; }
#p1 { position: absolute; bottom: 0; margin: 0; }
#img1 { width: 400px; height: 400px; }
</style>
<script type="text/javascript">
window.onload = function () {
var oPrve = document.getElementById('prve');
var oNext = document.getElementById('next');
var oStrong = document.getElementById('strong1');
var oP = document.getElementById('p1');
var oImg = document.getElementById('img1');
var arrUrl = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
var arrText = ['图片一', '图片二', '图片三', '图片四'];
var num = 0;
// function fnTab(){
oImg.src = arrUrl[num];
oStrong.innerHTML = num + 1 + '/' + arrText.length;
oP.innerHTML = arrText[num];
// };
// fnTab();
oNext.onclick = function () {
if (num >= arrUrl.length - 1) return;
num = num + 1;
oImg.src = arrUrl[num];
oStrong.innerHTML = num + 1 + '/' + arrText.length;
oP.innerHTML = arrText[num];
};
};
</script>
</head>
<body>
<div id="box">
<a id="prve" href="javascript:;"><</a> <a id="next" href="javascript:;">></a> <strong
id="strong1">图片计算中....</strong>
<p id="p1">
图片说明</p>
<img id="img1">
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
