一.HTML
<div id="box">
<ul>
<li> <img src="Images/img1.jpg" /> </li>
<li> <img src="Images/img2.jpg" /> </li>
<li> <img src="Images/img3.jpg" /> </li>
<li> <img src="Images/img4.jpg" /> </li>
<li> <img src="Images/img5.jpg" /> </li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
二.CSS
#box ol
{
list-style:none; /*去掉编码 */
position: absolute;
right:10px;
bottom: 10px;
}
#box ol li
{
float: left;
20px;
height: 20px;
background-color: #d110d3;
margin: 3px;
text-align: center;
line-height: 20px;
color: #000;
cursor: pointer;
border:1px solid #ffffff;
}
#box ol li .current
{
background-color: #ffd800;
}
三.JS
$(document).ready(function () {
$("#box ol li").mouseover(function (event) {
var index = $(this).index();//获取当前索引号
$("#box ul li").eq(index).fadeIn().siblings().hide();
//$(this).addClass('current').siblings().removeClass('current');//当前加样式，同胞元素去掉样式
});
});