前端之JQuery

JQuery

一、什么是JQuery

JQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是--WRITE LESS,DO MORE!它是轻量级的JS库，这是其他的JS库所不及的，兼容CSS3，还兼容各种浏览器。JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟插件可供选择。

二、什么是JQuery对象

JQuery对象就是通过jquery包装DOM对象后产生的对象。虽然jquery对象是包装DOM对象后产生的，但是jquery无法使用DOM对象的任何方法，同理DOM对象也不能使用jquery里的方法。

我们先声明一种约定：如果获取的是jquery对象，那么要在变量前面就上$。

JQuery的基础语法：$(selector).action() 其中selector是选择器，action()是操作。

 1 第一种方式：
 2 官网地址：http://jquery.com/download/
 3 注：
 4     1、Production version -用于实际的网站中，已被精简和压缩
 5     2、Development version -用于测试和开发(未压缩，可读的代码)
 6 
 7 
 8     其他方式（通过CDN引用它）：
 9 Staticfile：https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
10 百度：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
11 又拍云：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
12 新浪：https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
13 Google：https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

JQuery安装

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div>hello</div>
 9 </body>
10 引入方式一：
11 <!--<script src="jquery-3.3.1.min.js"></script>-->
12 引入方式二：
13 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
14 <script>
15     $("div").css("color","red");
16 </script>
17 </html>

JQuery引入方式

1 var $variable -----> JQuery对象（建议定义JQuery变量时，前面加"$"）
2 var variable------->DOM对象
3 
4 $variable[0]:JQuery对象转为DOM对象
5 
6 例子：
7     $("#msg").html;    <=====>    $("#msg")[0].innerHTML

JQuery对象转DOM对象

三、寻找元素

1.选择器：

 1 基本选择器：
 2 $("*")    $("#id")    $(".class")    $("element")    $(".class,p,div")
 3 
 4 层级选择器：
 5 $(".outer div")    $(".outer>div")    $(".outer+div")    $(".outer~div")
 6 
 7 属性选择器:
 8 $('[id="div1"]')    $('["alex"="sb"][id]')
 9 
10 表单选择器：
11 $("[type='txt']")  ------>$(":txt")注意：只适用于input标签：$("input:checked")

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div>hello</div>
10 <p id="p1" alex="sb">pppp</p>
11 <p id="p2" alex="dsb">pppp</p>
12 <a href="">click</a>
13 
14 <ul>
15     <li>111</li>
16     <li>222</li>
17     <li>333</li>
18     <li>444</li>
19 </ul>
20 
21 <input type="text">
22 <input type="checkbox">
23 <input type="submit">
24 
25 <div class="outer">outer
26     <div class="inner">inner
27         <p>inner p</p>
28     </div>
29     <p>alex</p>
30 </div>
31 
32 <script src="jquery-3.1.1.js"></script>
33 <script>
34     //$("div").css("color","red");
35     //jQuery("div").css("color","red");
36 //    $('#p1').css("color","red")
37 
38    // $(".outer p").css("color","red")
39     //$(".outer>p").css("color","red")
40 
41    // $("li:first").css("color","red")
42     //$("li:eq(1)").css("color","red")
43 
44     //$("[alex='sb']").css("color","red")
45 
46     //$("[type='text']").css('width','200px')
47     $("text").css('width','200px')
48 </script>
49 </body>
50 </html>

举例

2.筛选器：

 1 基本筛选器：
 2 $("li:first")    $("li:eq(2)")    $("li:even")    $("li:gt(1)")
 3 
 4 过滤筛选器：
 5 $("li").eq(2)    $("li").first    $("ul li").hasclass("test")
 6 
 7 
 8 查询筛选器：
 9 $("div").children(".test")    $("div").find(".test")    
10 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil()    $("div").prev()    $("div").preAll()    $("div").preUntil()    $(".test").parent()    $(".test").parents()    $(".test").parentUntil()    $("div").siblings()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <ul>
10     <li id="begin">1111</li>
11     <li>2222</li>
12     <li>3333</li>
13     <li>4444</li>
14     <li>5555</li>
15     <li id="end">6666</li>
16 </ul>
17 
18 <div class="outer">outer
19     <div class="inner">inner
20         <p>inner p</p>
21     </div>
22     <p>alex</p>
23 </div>
24 
25 <input type="text">
26 <input type="checkbox">
27 <input type="submit">
28 
29 <script src="jquery-3.1.1.js"></script>
30 <script>
31     //筛选器
32 //    $("li").eq(2).css("color","red");
33 //    $("li").first().css("color","red");
34 
35     //查找筛选器
36    // $(".outer").children("p").css("color","red");
37    // $(".outer").find("p").css("color","red");
38 
39     //$("li").eq(2).next().css("color","red");
40     //$("li").eq(2).nextAll().css("color","red");
41     //$("li").eq(2).nextUntil("#end").css("color","red");
42 
43     //$("li").eq(4).prev().css("color","red");
44     //$("li").eq(4).prevAll().css("color","red");
45     //$("li").eq(4).prevUntil("li:eq(0)").css("color","red");
46 
47     //console.log($(".outer .inner p").parent().html());
48     //$(".outer .inner p").parents().css("color","red");
49     //$(".outer .inner p").parents("boby").css("color","red");
50 
51     $(".outer").siblings().css("color","red");
52 
53 </script>
54 
55 
56 </body>
57 </html>

举例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .outer{
 8             height: 1000px;
 9             width: 100%;
10         }
11         .menu{
12             float: left;
13             background-color: beige;
14             width: 30%;
15             height: 500px;
16         }
17         .content{
18             float: left;
19             background-color: rebeccapurple;
20             width: 70%;
21             height: 500px;
22         }
23         .title{
24             background-color: aquamarine;
25             line-height: 40px;
26         }
27         .hide{
28             display:none ;
29         }
30     </style>
31 </head>
32 <body>
33 
34 <div class="outer">
35     <div class="menu">
36         <div class="item">
37             <div class="title" onclick="show(this)">菜单一</div>
38             <div class="con">
39                 <div>111</div>
40                 <div>111</div>
41                 <div>111</div>
42             </div>
43         </div>
44         <div class="item">
45             <div class="title" onclick="show(this)">菜单二</div>
46             <div class="con hide">
47                 <div>222</div>
48                 <div>222</div>
49                 <div>222</div>
50             </div>
51         </div>
52         <div class="item">
53             <div class="title" onclick="show(this)">菜单三</div>
54             <div class="con hide">
55                 <div>333</div>
56                 <div>333</div>
57                 <div>333</div>
58             </div>
59         </div>
60     </div>
61     <div class="content"></div>
62 </div>
63 
64 <script src="jquery-3.1.1.js"></script>
65 <script>
66     function show(self){
67         $(self).next().removeClass("hide");
68         $(self).parent().siblings().children(".con").addClass("hide");
69 
70     }
71 </script>
72 
73 </body>
74 </html>

左侧菜单

四、操作元素

1.属性操作

1 属性(固有属性尽量用prop，自定义属性用attr)
2     $("").attr()、$("").removeAttr()、$("").prop()、$("").removeProp()
3 CSS类
4     $("").addClass()、$("").removeClass()
5 HTML代码/文本/值
6     $("").html()、$("").text()、$("").val()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="div1" con="c1"></div>
10 <input type="checkbox" checked="checked">是否可见
11 <input type="checkbox">是否可见
12 
13 <input type="text" value="123">
14 <div value="456"></div>
15 
16 
17 <script src="jquery-3.1.1.js"></script>
18 <script>
19     //console.log($("div").attr("con"))
20 
21     //console.log($(":checkbox:first").attr("checked"));
22     //console.log($(":checkbox:last").attr("checked"));
23 
24     //console.log($(":checkbox:first").prop("checked"));
25     //console.log($(":checkbox:last").prop("checked"));
26 
27 
28     //固有属性
29     console.log($(":text").val());
30     console.log($(":text").next().val());
31 </script>
32 
33 </body>
34 </html>

属性操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <p>55</p>
10 <p>66</p>
11 <p>77</p>
12 
13 <script src="jquery-3.1.1.js"></script>
14 <script>
15     arr = [11,22,33];
16 //    for(var i=0;i<arr.length;i++){
17 //        $("p").eq(i).html(arr[i])
18 //    }
19 
20     //循环遍历方式一
21     $.each(arr,function(x,y){
22         console.log(x);
23         console.log(y);
24     });
25 
26     //循环遍历方式二
27     $("p").each(function(){
28         console.log($(this));
29         $(this).html('hello')
30     })
31 </script>
32 
33 
34 </body>
35 </html>

JQuery循环遍历

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <button onclick="selectAll()">全选</button>
10 <button onclick="Cancel()">取消</button>
11 <button onclick="reverse()">反选</button>
12 
13 <table>
14     <tr>
15         <td><input type="checkbox"></td>
16         <td>111</td>
17     </tr>
18     <tr>
19         <td><input type="checkbox"></td>
20         <td>222</td>
21     </tr>
22     <tr>
23         <td><input type="checkbox"></td>
24         <td>333</td>
25     </tr>
26 </table>
27 
28 <script src="jquery-3.1.1.js"></script>
29 <script>
30     function selectAll(){
31         $(":checkbox").each(function(){
32             $(this).prop("checked",true);
33         })
34     }
35 
36     function Cancel() {
37         $(":checkbox").each(function () {
38             $(this).prop("checked", false);
39         })
40     }
41 
42     function reverse(){
43         $(":checkbox").each(function () {
44             if($(this).prop('checked')){
45                 $(this).prop("checked", false);
46             }
47             else {
48                 $(this).prop("checked", true);
49             }
50         })
51     }
52 </script>
53 
54 
55 </body>
56 </html>

JQuery正反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .content{
 8             height: 1800px;
 9             background-color: white;
10 
11         }
12         .shade{
13             position: fixed;
14             top:0;
15             left: 0;
16             right: 0;
17             bottom: 0;
18             background-color: gray;
19             opacity: 0.5;
20         }
21 
22         .model{
23             width: 200px;
24             height: 200px;
25             background-color: bisque;
26             position: absolute;
27             top: 50%;
28             left: 50%;
29             margin-top: -100px;
30             margin-left: -100px;
31 
32         }
33         .hide{
34             display: none;
35         }
36     </style>
37 </head>
38 <body>
39 
40 <div class="content">
41     <button onclick="show(this)">显示</button>
42 </div>
43 
44 <div class="shade hide"></div>
45 
46 <div class="model hide">
47     <button onclick="cancel(this)">取消</button>
48 </div>
49 
50 <script src="jquery-3.1.1.js"></script>
51 <script>
52     function show(self){
53         $(self).parent().siblings().removeClass('hide');
54     }
55     function cancel(self){
56         //$(self).parent().siblings().eq(1).addClass('hide');
57         //$(self).parent().addClass('hide');
58         $(self).parent().parent().children('.model,.shade').addClass('hide');
59     }
60 </script>
61 </body>
62 </html>

JQuery模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="c1">
10     <p>pppp</p>
11 </div>
12 
13 <button>add</button>
14 <script src="jquery-3.1.1.js"></script>
15 
16 <script>
17     $("button").click(function(){
18         //$(".c1").append('<h1>hello alex</h1>')
19         var $ele=$('<h1></h1>');
20         $ele.html('hello alex');
21         $ele.css('color','red');
22 //内部插入
23         //$('.c1').append($ele);
24         //$ele.appendTo('.c1');
25         //$('.c1').prepend($ele);
26         //$ele.prependTo('.c1');
27 //外部插入
28         //$('.c1').after($ele);
29         //$ele.insertAfter('.c1');
30         //$('.c1').before($ele);
31         //$ele.insertBefore('.c1');
32 //替换
33        // $('p').replaceWith($ele);
34 //删除
35         //$('.c1').empty();
36         //$('.c1').remove();
37 //复制
38         var $ele2=$(this).prev().clone();
39         console.log($(this).prev())
40         $('.c1').after($ele2);
41 
42     })
43 
44 </script>
45 
46 </body>
47 
48 
49 </html>

增删改查

2.CSS操作

位置
    $("").offset()、$("").position()、$("").scrollTop()、$("").scrollLeft()
尺寸
    $("").height()、$("").width()、$("").innerHeight()、$("").innerWidth()、$("").outerHeight()、$("").outerWidth()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6             <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .div2{
12             width: 100%;
13             height: 800px;
14 
15         }
16 
17         .div1{
18             width: 40%;
19             height: 150px;
20             overflow: auto;
21             background-color: antiquewhite;
22         }
23         .div2{
24             background-color: rebeccapurple;
25         }
26         .returnTop{
27             position: fixed;
28             right: 20px;
29             bottom: 20px;
30             width: 90px;
31             height: 50px;
32             background-color: gray;
33             color: white;
34             text-align: center;
35             line-height: 50px;
36 
37         }
38         .hide{
39             display: none;
40         }
41 
42     </style>
43 </head>
44 <body>
45 
46 <div class="div1">
47     <h1>1111</h1>
48     <h1>1111</h1>
49     <h1>1111</h1>
50     <h1>1111</h1>
51     <h1>1111</h1>
52     <h1>1111</h1>
53 </div>
54 <div class="div2">
55     <button onclick="returnTop()">return</button>
56 </div>
57 <div class="returnTop hide" onclick="returnTop()">返回顶部</div>
58 
59 <script src="jquery-3.1.1.js"></script>
60 <script>
61     window.onscroll=function(){
62      //   console.log($(window).scrollTop);
63         if($(window).scrollTop()>60){
64             $('.returnTop').removeClass('hide');
65         }else {
66             $('.returnTop').addClass('hide');
67         }
68     };
69 //    function returnTop(){
70 //        //$(window).scrollTop(0);
71 //        $('.div1').scrollTop(0);
72 //    }
73 
74     $('.div2 button').click(function(){
75         $('.div1').scrollTop(0);
76     })
77 </script>
78 
79 
80 
81 </body>
82 </html>

JQuery滚动条事件

五、事件

页面载入
    ready()  当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
    $(document).ready(function(){})
事件处理
    $("").on()  在选择元素上绑定一个或多个事件的事件处理函数。
    举例：$("ul").on("click","li",function(){})

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <ul>
10     <li>1111</li>
11     <li>2222</li>
12     <li>3333</li>
13     <li>4444</li>
14 </ul>
15 <button>add</button>
16 <script src="jquery-3.1.1.js"></script>
17 <script>
18 //    var eles=document.getElementsByTagName('li');
19 //    for(var i in eles) {
20 //        eles[i].onclick = function () {
21 //            alert(123)
22 //        }
23 //    }
24 
25 //    $("ul li").click(function(){
26 //        alert(123);
27 //    });
28 
29 //    $("ul li").bind("click",function(){
30 //        alert(666);
31 //    });
32 
33     //事件委托
34     $("ul").on("click","li",function(){
35         alert(666);
36     });
37 
38     $("button").click(function(){
39         var $ele=$("<li>");
40         var len=$("ul li").length;
41         $ele.html((len+1)*1111);
42         $("ul").append($ele);
43     });
44 </script>
45 </body>
46 </html>

事件

六、动画效果

显示隐藏切换
    $("").show()、$("").hide()、$("").toggle()
滑动
    $("").slideDown()、$("").slideUp()、$("").slideToggle()
淡入淡出
    $("").fadeIn()、$("").fadeOut、$("").fadeToggle、$("").fadeTo
回调函数
    $("div").show(1000,function(){ });

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--显示隐藏切换-->
 9 <div>hello</div>
10 <button onclick="f1()">显示</button>
11 <button onclick="f2()">隐藏</button>
12 <button onclick="f3()">切换</button>
13 <script src="jquery-3.1.1.js"></script>
14 <script>
15     function f1(){
16         $("div").show(1000);
17     }
18     function f2(){
19         $("div").hide(1000);
20     }
21     function f3(){
22         $("div").toggle(1000);
23 
24     }
25 </script>
26 </body>
27 </html>

显示隐藏切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.1.1.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#slideDown").click(function(){
10                 $("#content").slideDown(1000);
11             });
12             $("#slideUp").click(function(){
13                 $("#content").slideUp(1000);
14             });
15             $("#slideToggle").click(function(){
16                 $("#content").slideToggle(1000);
17             });
18         })
19     </script>
20     <style>
21         #content{
22             text-align: center;
23             background-color: lightblue;
24             border: solid 1px red;
25             display: none;
26             padding: 50px;
27         }
28     </style>
29 </head>
30 <!--滑动-->
31 
32 <body>
33 
34     <div id="slideDown">出现</div>
35     <div id="slideUp">隐藏</div>
36     <div id="slideToggle">切换</div>
37 
38     <div id="content">hello world</div>
39 
40 </body>
41 </html>

滑动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.1.1.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#in").click(function(){
10                 $("#id1").fadeIn(1000);
11             });
12             $("#out").click(function(){
13                 $("#id1").fadeOut(1000);
14             });
15             $("#toggle").click(function(){
16                 $("#id1").fadeToggle(1000);
17             });
18             $("#fadeto").click(function(){
19                 $("#id1").fadeTo(1000,0.4);
20             });
21         })
22     </script>
23 </head>
24 <body>
25 <!--淡入淡出-->
26     <button id="in">fadein</button>
27     <button id="out">fadeout</button>
28     <button id="toggle">fadetoggle</button>
29     <button id="fadeto">fadeto</button>
30 
31     <div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div>
32 
33 
34 
35 </body>
36 </html>

淡入淡出

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--回调函数-->
 9 
10 <div>hello</div>
11 <button onclick="f1()">显示</button>
12 <button onclick="f2()">隐藏</button>
13 <button onclick="f3()">切换</button>
14 <script src="jquery-3.1.1.js"></script>
15 <script>
16     function f1(){
17         $("div").show(1000,function(){
18             alert(123)
19         });
20     }
21     function f2(){
22         $("div").hide(1000,function(){
23             alert(456)
24         });
25     }
26     function f3(){
27         $("div").toggle(1000);
28 
29     }
30 </script>
31 
32 </body>
33 </html>

回调函数

七、扩展方法

1 $.extend(object)  为jquery添加一个静态方法
2 $.fn.extend(object)    位jquery实例添加一个方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p>1111</p>
 9 <p>2222</p>
10 <p>3333</p>
11 
12 <script src="jquery-3.1.1.js"></script>
13 <script>
14 //    $.extend({
15 //        Myprint:function(){
16 //            console.log("hello");
17 //        }
18 //    });
19 //
20 //    $.Myprint();
21 
22     $.fn.extend({
23         GetText:function() {
24 //            for (var i = 0; i < this.length; i++) {
25 //                console.log($(this[i].innerHTML)
26 //            }
27 
28             $.each($(this),function(x,y){
29 
30                 console.log(y.innerHTML);
31             })
32         }
33 
34     });
35     $("p").GetText();
36 </script>
37 
38 
39 </body>
40 </html>

扩展

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

综合练习：轮播图

posted @ 2019-10-12 17:03 流浪代码阅读(265) 评论(0) 编辑收藏举报

刷新页面返回顶部

千万野心

Having dreams is what makes life tolerable

前端之JQuery

公告