jQuery的fadeIn和fadeOut实现的轮播图

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         *{margin: 0;padding: 0;}
         ul,ol{ list-style: none;}
         .wrapper{
             width: 670px;
             height: 240px;
             margin: 100px auto;
             overflow: hidden;
             position: relative;
         }
         ol{
             position: absolute;
             right: 0;
             bottom: 10px;
             width: 190px;
         }
         ol li{
             float: left;
             width: 20px;
             height: 20px;
             margin: 0 5px;
             text-align: center;
             border-radius: 50%;
             cursor: default;
             background-color: #abc;
         }
         ol li.current{
             background-color: pink;
         }
     </style>
     <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
     <script type="text/javascript">
         $(function () {
             // 根据ol下li的索引号，匹配ul下相对应li的索引号
             $(".wrapper ol li").mouseenter(function () {
                 $(this).addClass("current").siblings().removeClass("current");
                 $(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut();
             });
         });
     </script>
 </head>
 <body>
     <div class="wrapper">
         <ul>
             <li><img src="data:images/1.jpg" alt=""/></li>
             <li><img src="data:images/2.jpg" alt=""/></li>
             <li><img src="data:images/3.jpg" alt=""/></li>
             <li><img src="data:images/4.jpg" alt=""/></li>
             <li><img src="data:images/5.jpg" alt=""/></li>
             <li><img src="data:images/6.jpg" alt=""/></li>
         </ul>
         <ol>
             <li class="current">1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
             <li>6</li>
         </ol>
     </div>
 </body>
 </html>