jQuery的fadeIn和fadeOut实现的轮播图 

 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>

 

posted @ 2018-01-01 22:35  前端极客  阅读(946)  评论(0)  编辑  收藏  举报