jQuery實現的層級輪播圖
阿新 • • 發佈：2018-01-01
ngs gin height padding div hit mage ani over
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 ul, ol { 13 list-style: none; 14 } 15 16 .wrap { 17 width: 650px; 18 height: 250px; 19 margin: 100px auto 0; 20 position: relative; 21 overflow: hidden; 22 } 23 24 .wrap img { 25 display: block; 26 } 2728 .wrap ul { 29 height: 250px; 30 z-index: 1; 31 position: relative; 32 } 33 34 .wrap ol { 35 height: 30px; 36 z-index: 2; 37 position: absolute; 38 bottom: 0; 39 right: 0; 40 } 41 42 .wrap > ul > li { 43 position: absolute; 44 top: 0; 45 left: 0; 46 } 47 48 .wrap > ol > li { 49 float: left; 50 width: 20px; 51 height: 20px; 52 text-align: center; 53 line-height: 20px; 54 border: 1px solid white; 55 margin-right: 5px; 56 background: Gray; 57 } 58 59 .wrap > ol > li:hover { 60 cursor: pointer; 61 } 62 63 .wrap li.active { 64 padding: 2px; 65 color: orange; 66 margin-top: -4px; 67 border: 1px solid orange; 68 } 69 </style> 70 <script src="../jquery-1.11.1.min.js"></script> 71 <script> 72 $(document).ready(function () { 73 var zIndex = 0; 74 $(".wrap > ol > li").mouseenter(function () { 75 zIndex++; 76 $(this).addClass("active").siblings().removeClass("active"); 77 $(".wrap > ul > li") 78 .eq($(this).index()) 79 .css({ 80 //這裏後面的zIndex是數值，不能加引號 81 "z-index": zIndex, 82 "left": 650 83 }) 84 .animate({ 85 "left": 0 86 }, 1000); 87 }); 88 }); 89 </script> 90 </head> 91 <body> 92 <div class="wrap"> 93 <ul> 94 <li style="z-index:1;"><img src="images/01.jpg" alt=""/></li> 95 <li><img src="images/02.jpg" alt=""/></li> 96 <li><img src="images/03.jpg" alt=""/></li> 97 <li><img src="images/04.jpg" alt=""/></li> 98 <li><img src="images/05.jpg" alt=""/></li> 99 </ul> 100 <ol> 101 <li class="active">1</li> 102 <li>2</li> 103 <li>3</li> 104 <li>4</li> 105 <li>5</li> 106 </ol> 107 </div> 108 </body> 109 </html>
jQuery實現的層級輪播圖