首页新闻找找看学习计划

js问题 求指教

0
悬赏园豆:5 [待解决问题]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-图片上下轮播</title>
<style>
{
margin: 0;
padding: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50%;
margin-left: -100px;
margin-top: 100px;
}
#box1 ul{
list-style: none;
width: 200px;
height: 200px;
background-color: blue;
overflow: hidden;
}
#box1 ol{
width: 125px;
height: 30px;
/
background-color: green;/
position: absolute;
top: 150px;
right: 10px;
list-style: none;
}
#box1 ol li{
width: 25px;
height: 30px;
text-align: center;
line-height: 30px;
/
background-color: #cccccc;/
/
opacity: 0.5;/
border: 1px solid #cccccc;
box-sizing: border-box;
float: left;
margin-left: 5px;
}
.active{
background-color: red;
}
</style>
<script>
window.onload=function ()
{
var oBox1=document.getElementById('box1');
var aBtn1=oBox1.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oBox1.getElementsByTagName('ul')[0];
for(var i=0;i<aBtn1.length;i++)
{
aBtn1[i].index=i;
aBtn1[i].onclick=function ()
{
for(var i=0;i<aBtn1.length;i++)
{
aBtn1[i].className=''
}
this.className='active';
oUl.style.top=-200
this.index+'px';
}
}
}
</script>
</head>
<body>
<div id="box1">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ul>
<li><img src="img/a.jpg" alt=""></li>
<li><img src="img/b.jpg" alt=""></li>
<li><img src="img/c.jpg" alt=""></li>
<li><img src="img/d.jpg" alt=""></li>
</ul>
</div>
</body>
</html>

js
user_cj的主页 user_cj | 初学一级 | 园豆:188
提问于:2019-05-13 22:13
< >
分享
所有回答(3)
0

描述问题啊

ycyzharry | 园豆:18637 (专家六级) | 2019-05-13 22:31
0

语法都错了,编译都过不去。。后面个个ui是在干嘛?自己给自己找事吗。。算了 你写代码的样子 像极了cxk..

彼岸黎明 | 园豆:217 (菜鸟二级) | 2019-05-14 11:52
0

你到底想干嘛

龙行天涯 | 园豆:1830 (小虾三级) | 2019-05-14 15:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册