87,910
社区成员
发帖
与我相关
我的任务
分享能帮我看一下代码哪里出问题了吗，这是图片的切换，可是点击无法切换图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#pic{
width: 500px;
height:400px;
margin: 0 auto;
position: relative;
text-align: center;
}
#pic img{
width: 500px;
height:400px;
}
#pic a{
width: 36px;
height: 36px;
border-radius:18px;
display: inline-block;
text-decoration: none;
background: #f4511e;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 36px;
color: white;
position: absolute;
opacity: 0.6;
}
#left{
top:200px;
left: 5px;
}
#right{
top:200px;
right: 5px;
}
#pic input{
width: 14px;
height: 14px;
border-radius: 7px;
border: 0px;
}
.avtive{
background: #f4511e;
}
#pic a:hover{
opacity: 1;
}
</style>
<script>
window.onload= function () {
var oDiv=document.getElementById('pic');
var oImg=oDiv.getElementsByTagName('img')[0];
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var aBtn=oDiv.getElementsByTagName('input');
var arrImg=['imgs/s1.jpg','imgs/s2.jpg','imgs/s3.jpg','imgs/s4.jpg'];
var num = 0;
oImg.src=arrImg[num];
oLeft.onclick=function(){
num--;
if(num == -1){
num=arrImg.length-1;
}
oImg.src=arrImg[num];
}
oRight.onclick = function () {
num++;
if (num == arrImg.length) {
num = 0;
}
oImg.src=arrImg[num];
}
}
</script>
</head>
<body>
<div id="pic">
<img src="" alt=""/>
<a id="left" href=""><</a>
<a id="right" href="">></a>
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#pic{
width: 500px;
height:400px;
margin: 0 auto;
position: relative;
text-align: center;
}
#pic img{
width: 500px;
height:400px;
}
#pic a{
width: 36px;
height: 36px;
border-radius:18px;
display: inline-block;
text-decoration: none;
background: #f4511e;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 36px;
color: white;
position: absolute;
opacity: 0.6;
}
#left{
top:200px;
left: 5px;
}
#right{
top:200px;
right: 5px;
}
#pic input{
width: 14px;
height: 14px;
border-radius: 7px;
border: 0px;
}
.avtive{
background: #f4511e;
}
#pic a:hover{
opacity: 1;
}
</style>
<script>
window.onload= function () {
var oDiv=document.getElementById('pic');
var oImg=oDiv.getElementsByTagName('img')[0];
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var aBtn=oDiv.getElementsByTagName('input');
var arrImg=['imgs/s1.jpg','imgs/s2.jpg','imgs/s3.jpg','imgs/s4.jpg'];
var num = 0;
oImg.src=arrImg[num];
oLeft.onclick=function(){
num--;
if(num == -1){
num=arrImg.length-1;
}
oImg.src=arrImg[num];
}
oRight.onclick = function () {
num++;
if (num == arrImg.length) {
num = 0;
}
oImg.src=arrImg[num];
}
}
</script>
</head>
<body>
<div id="pic">
<img src="" alt=""/>
<a id="left" href=""><</a>
<a id="right" href="">></a>
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2018-03-27
- 打赏
- 举报
<a id="left" href=""><</a>
<a id="right" href="">></a>
===》改为死链接，为空就是当前页面，都刷新了还切换什么
<a id="left" href="#"><</a>
<a id="right" href="#">></a>
Web开发学习资料推荐
jqGrid行编辑配置
easyui开发技巧
Web开发学习资料推荐
jqGrid行编辑配置
easyui开发技巧
