JQuery 图片轮播,详细注释说明,让你一看就会!

准备工作:

  1、准备几张大小相同的图片

完成功能:

  1、自动轮播

  2、手动轮播

  3、点击二侧按钮前后切换图片

JQuery插件地址:

链接:https://pan.baidu.com/s/1zNl2-zulPurl1Tqiu4jo6Q
提取码:2ir4

效果图:

完整代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .outer {
  8             width: 590px;
  9             height: 470px;
 10             margin: 80px auto;
 11             position: relative;
 12         }
 13 
 14         .img li {
 15             position: absolute;
 16             list-style: none;
 17             top: 0px;
 18             left: 0px;
 19         }
 20 
 21         .num {
 22             position: absolute;
 23             bottom: 15px;
 24             left: 120px;
 25             list-style: none;
 26         }
 27 
 28         .num li {
 29             display: inline-block;
 30             width: 18px;
 31             height: 18px;
 32             background-color: white;
 33             border-radius: 50%;
 34             text-align: center;
 35             line-height: 18px;
 36             margin-left: 10px;
 37         }
 38 
 39         .btn {
 40             position: absolute;
 41             top: 50%;
 42             width: 30px;
 43             height: 60px;
 44             background-color: lightgray;
 45             color: white;
 46             text-align: center;
 47             line-height: 60px;
 48             font-size: 30px;
 49             opacity: 0.6;
 50             margin-top: -30px;
 51             display: none;
 52         }
 53 
 54         .left_btn {
 55             left: 0px;
 56         }
 57 
 58         .right_btn {
 59             right: 0px;
 60         }
 61 
 62         .outer:hover .btn {
 63             display: block;
 64         }
 65 
 66         .num .active {
 67             background-color: red;
 68         }
 69     </style>
 70 </head>
 71 <body>
 72 <div class="outer">
 73     <ul class="img">
 74         <li><a href="#"><img src="images/0.jpg" alt=""></a></li>
 75         <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
 76         <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
 77         <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
 78         <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
 79         <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
 80         <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
 81         <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
 82     </ul>
 83     <ul class="num">
 84         <!--<li class="active"></li>-->
 85         <!--<li></li>-->
 86         <!--<li></li>-->
 87         <!--<li></li>-->
 88         <!--<li></li>-->
 89         <!--<li></li>-->
 90         <!--<li></li>-->
 91         <!--<li></li>-->
 92     </ul>
 93     <div class="left_btn btn"> <</div>
 94     <div class="right_btn btn"> ></div>
 95 </div>
 96 </body>
 97 <script src="jquery-3.3.1.min.js"></script>
 98 <script>
 99     var i = 0;
100     // 通过JQuery获取img标签下li的个数,然后自动创建num标签下的按钮标签li
101     var $img_num = $(".img li").length;
102     for (var j = 0; j < $img_num; j++) {
103         $(".num").append("<li>");
104     }
105     $(".num li").eq(0).addClass("active");
106 
107     // 手动轮播,绑定事件
108     $(".num li").mouseover(function () {
109         i = $(this).index();
110         console.log(i);
111         $(this).addClass("active");
112         $(this).siblings().removeClass("active"); // 取消其他标签按钮的active
113         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
114     })
115     
116     // 自动轮播
117     var c = setInterval(GO_R,1500)
118 
119     function GO_R() {
120         if (i == $img_num-1)
121         {
122             i = -1;
123         }
124         i++;
125         $(".num li").eq(i).addClass("active")
126         $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active
127         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
128     }
129     function GO_L(){
130         if (i == 0)
131         {
132             i = $img_num;
133         }
134         i--;
135         $(".num li").eq(i).addClass("active")
136         $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active
137         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
138     }
139     // 悬浮,清除计时器
140     $(".outer").hover(function () {
141         clearInterval(c)
142     },function () {
143         c = setInterval(GO_R,1500)
144     })
145 
146     // button 加定播
147     // 绑定一
148     $(".right_btn").click(GO_R)
149     // 绑定二
150     // $(".right_btn").bind("click",GO_R)
151 
152     $(".left_btn").click(GO_L)
153 
154 </script>
155 </html>

 

posted @ 2019-03-06 18:52  陈彦斌  阅读(775)  评论(0编辑  收藏  举报