1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 ul,ol{ list-style: none;} 9 .wrapper{ 10 width: 670px; 11 height: 240px; 12 margin: 100px auto; 13 overflow: hidden; 14 position: relative; 15 } 16 ol{ 17 position: absolute; 18 right: 0; 19 bottom: 10px; 20 width: 190px; 21 } 22 ol li{ 23 float: left; 24 width: 20px; 25 height: 20px; 26 margin: 0 5px; 27 text-align: center; 28 border-radius: 50%; 29 cursor: default; 30 background-color: #abc; 31 } 32 ol li.current{ 33 background-color: pink; 34 } 35 </style> 36 <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> 37 <script type="text/javascript"> 38 $(function () { 39 // 根据ol下li的索引号，匹配ul下相对应li的索引号 40 $(".wrapper ol li").mouseenter(function () { 41 $(this).addClass("current").siblings().removeClass("current"); 42 $(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut(); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <div class="wrapper"> 49 <ul> 50 <li><img src="images/1.jpg" alt=""/></li> 51 <li><img src="images/2.jpg" alt=""/></li> 52 <li><img src="images/3.jpg" alt=""/></li> 53 <li><img src="images/4.jpg" alt=""/></li> 54 <li><img src="images/5.jpg" alt=""/></li> 55 <li><img src="images/6.jpg" alt=""/></li> 56 </ul> 57 <ol> 58 <li class="current">1</li> 59 <li>2</li> 60 <li>3</li> 61 <li>4</li> 62 <li>5</li> 63 <li>6</li> 64 </ol> 65 </div> 66 </body> 67 </html>