今天来做个类似淘宝网页的这么一个小Demo，当鼠标移到12345上的任何数字上，就会显示哪张图片
首先，我们先在桌面上创建个文件夹，用来保存需要的HTML文件和图片
我是将图片放在了子文件夹下的，这样利于查找，免得到时候项目做大了，没有区分开，很麻烦的。
首先我先把代码给大家：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
body,ul,ol{margin0;padding:0;}
li{list-style:none;}
img{
border:none;
vertical-align:top;
}
#box{
width:470px;
height:150px;
position:relative;
margin:30px auto;
overflow:hidden;
}
ul{
width:470px;
position:absolute;
left:0;
top:0;
z-index:1;
}
ul li{width:470px;display:none;}
ol{
z-index:2;
width:120px;
position:absolute;
right:10px;
bottom:-2px;
}
ol li{
width:20px;height:20px;float:left;margin:0 2px;display:inline;background:#fff;color:red;line-height:20px;text-align:center;
}
li.active{
background:#f60;
color:#fff;
}
</style>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0];
var aLiUl=oUl.getElementsByTagName('li');
var oOl=document.getElementsByTagName('ol')[0];
var aLiOl=oOl.getElementsByTagName('li');
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].index=i;
aLiOl[i].onmouseover=function(){
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].className="";
aLiUl[i].style.display='none';
}
// alert(1);
this.className='active';
aLiUl[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="box">
<ul>
<li style="display:block"><img src="img/6.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body></html>
那么我们来一一讲解这些英文字母都是什么意思
其实感觉有这么多代码，但是它显示给你的只有一小部分
之前讲过，页面上显示的就是你body标签里的代码
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h50675.shtml
