js 焦点图切换按钮控制大小图片滚动代码问题

就是那个1234颜色不变啊。。为啥呢？搞了好久下面是代码。。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"... 就是那个1 2 3 4颜色不变啊。。为啥呢？搞了好久
下面是代码。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课1</title>
</head>
<style>
img{
width:470px;
height:150px;
border:none;
vertical-align:top;
}
.box{
position:relative;
margin:30px auto;
width:470px;
height:150px;
overflow:hidden;
}
ul{
position:absolute;
left:0;
top:0;
z-index:1;
width:470px;
}
ul li{
width:470px;
display:none;
}
ol{
position:absolute;
right:10px;
bottom:10px;
width:120px;
z-index:2;
}
ol li{
margin:0 2px;
width:20px;
height:20px;
float:left;
display:inline;
background:#fff;
color:#f60;
line-height:20px;
text-align:center;
}
ol .active{
background:#f60;
color:#fff;
}
</style>

<body>
<div class="box">
<ul>
<li style="display:block"><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
<script>
window.onload = function(){

var oUl = document.getElementsByTagName('ul')[0];
var aLiUl = oUl.getElementsByTagName('li');

var oOl = document.getElementsByTagName('ul')[0];
var aLiOl = oOl.getElementsByTagName('li');

for(var i = 0; i < aLiOl.length; i++){

aLiOl[i].onmouseover = function(){

this.className = 'active';
};
}
};
</script>
</html> 展开

 我来答

2个回答

#热议# 上班途中天气原因受伤算工伤吗？

匿名用户
推荐于2016-02-18

展开全部

window.onload = function() {
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li');
    var oOl = document.getElementsByTagName('ol')[0];//这里写错成ul
    var aLiOl = oOl.getElementsByTagName('li');
    var index = 0;
    // 这里修改了逻辑
    for (var i = 0; i < aLiOl.length; i++) {
        aLiOl[i].index = i;
        aLiOl[i].onmouseover = function() {
            aLiOl[index].className = "";
            this.className = 'active';
            index = this.index;
        };
    }
};