<textarea readonly="readonly" name="code" class="c++">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小鳄鱼娃娃排他思想再体验</title>
<style>
* {
margin:0px;
padding:0px;
}
ul ,ol{
list-style:none;
}
.box {
width:490px;
height:500px;
margin:100px auto;
}
.box ol{
width:490px;
height:50px;
}
.box ol li{
float:left;
width:90px;
height:50px;
text-align:center;
line-height:50px;
border:1px solid;
border-radius:10px;
margin-left:5px;
cursor:pointer;
}
.box ol li.select {
background-color:hotpink;
}
.box ul{
width:490px;
height:400px;
padding-top:50px;
}
.box ul li{
display:none;
width:490px;
height:400px;
border:1px solid;
border-radius:10px;
background: url("../images/Ricemouse/1.png")no-repeat;
background-size:490px 400px;
}
.box ul li.show {
display:block;
}
</style>
<script>
window.onload= function(){
//先获取大盒子的id
var ol=document.getElementById('ol');
var ul=document.getElementById('ul');
//再获取盒子里面序列的id这是一个集合，document.是获取整个文档的id，要写自己盒子名.
var olTagli=ol.getElementsByTagName('li');
var ulTagli=ul.getElementsByTagName('li');
//for循环里的变量一定也要记得先定义
for ( var i=0;i<olTagli.length;i++){
//这里要先存储当前下标，为了填补js闭包的坑
olTagli[i].index=i;
//下面开始写鼠标的作用函数
olTagli[i].onmouseover=function(){
//排他，先把其他盒子给清理掉
for(var j=0;j<olTagli.length;j++){
//遍历判断是否有盒子正在显示
if(olTagli[j].className=="select"){
olTagli[j].className="";
ulTagli[j].className="";
}
//now ,you can display the box you want,and the index you saved will use right here.
olTagli[this.index].className="select";
ulTagli[this.index].className="show";
ulTagli[this.index].style.backgroundImage='url("../images/Ricemouse/'+(this.index+1)+'.png")';
}
}
//when the mouse go away
olTagli[i].onmouseout=function(){
olTagli[this.index].className="";
ulTagli[this.index].className="";
olTagli[0].className="select";
ulTagli[0].className="show";
ulTagli[0].style.backgroundImage='url("../images/Ricemouse/'+(1)+'.png")';
}
}
}
</script>
</head>
<body>
<div class="box">
<ol id="ol">
<li class="select">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul id="ul">
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
</textarea>
