一.HTML

    <div id="box">

            <ul>  

               <li>  <img src="http://www.mamicode.com/Images/img1.jpg" /> </li>

               <li>  <img src="http://www.mamicode.com/Images/img2.jpg" />  </li>

               <li>  <img src="http://www.mamicode.com/Images/img3.jpg" /> </li> 

               <li>  <img src="http://www.mamicode.com/Images/img4.jpg" /> </li> 

               <li> <img src="http://www.mamicode.com/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;           

    width: 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‘);//当前加样式，同胞元素去掉样式
    });
});