jQuery实现的层级轮播图

Posted 2020-10-19 Carina

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现的层级轮播图相关的知识，希望对你有一定的参考价值。

  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         }
 27 
 28         .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实现的层级轮播图的主要内容，如果未能解决你的问题，请参考以下文章

Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程