jquery属性操作，应用，事件，扩展extend，动画效果（二）

一、相关知识点总结
1、CSS
.css()
      - .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
      - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
      - .css(["color", "border"]) -> 获取多个值
   .offset
       - 获取相对位置
       - 比较的对象是html (窗口)
   .position
        - 获取相对已经定位的父标签的位置
        - 比较的是最近的那个做过定位的祖先标签
   .scrollTop([val])
      - 返回顶部的例子
   .scrollLeft([val])
   尺寸：
    height([val|fn])
      - 元素的高度
   width([val|fn])
       - 元素的宽度
   innerHeight()
      - 带padding的高度
   innerWidth()
       - 带padding的宽度
   outerHeight([soptions])
      - 在innerHeight的基础上再加border的高度
   outerWidth([options])
       - 在innerHeight的基础上再加border的高度

2、文档操作
内部插入
    A.append(B)       吧B添加到A的后面
    A.appendTo(B)     吧A添加到B的后面
    A.prepend(B)      吧B添加到A的前面
    A.prependTo(B)    吧A添加到B的前面
外部插入
    A.after(B)        吧B添加到A的后面
    A.insertAfter(B) 吧A添加到B的后面
    A.before(B)       吧B添加到A的前面
    A.insertBefore(B) 吧A添加到B的前面

    包裹
    wrap(html|ele|fn)
      A.wrap(B) --> B包A
   unwrap()   不抱
      - 不要加参数

   wrapAll(html|ele) 都包(作为整体包)，只包你选中的那个
   wrapInner(html|ele|fn) 里面包
    替换
    replaceWith(content|fn)
      A.replaceWith(B) --> B替换A

   replaceAll(selector)
      A.replaceAll(B)   --> A替换B

    删除
    empty()
      - 清空内部清空
   remove([expr])
      - 删除整体都删除
   detach([expr])
      - 剪切多保存在变量中，方便再次使用
    克隆/复制
    clone([Even[,deepEven]])

3、动画
基本
   show([s,[e],[fn]])
   hide([s,[e],[fn]])
   toggle([s],[e],[fn])
滑动
   slideDown([s],[e],[fn])
   slideUp([s,[e],[fn]])
   slideToggle([s],[e],[fn])
淡入淡出
   fadeIn([s],[e],[fn])
   fadeOut([s],[e],[fn])

   fadeTo([[s],o,[e],[fn]])
      - 淡出到0.66透明度
   fadeToggle([s,[e],[fn]])
      - .fadeToggle(3000, function () {
            alert("真没用3");
        });
自定义
animate(p,[s],[e],[fn])1.8*
   - css属性值都可以设置
    - 图片变小（漏气）
4. 事件处理

之前绑定事件的方式：
      1. onclick=clickMe(); function clickMe() {}
      2. ele.onclick = function(){}
      3. ele.addEventListener("click", function(){}) js事件委派

   jQuery绑定事件的方式：
      1. $(ele).on("click", function(){})
      2. $("tbody").delegate(".btn-warning", "click", function(){}) 这个3.几的版本没有这个方法了，这是3.几以前版本有的方法
      3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见

<input type="text" value="123">
<div value="456"></div>

<div id="id1">
    uuuuu
    <p>ppppp</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
//    console.log($("div").hasClass("div11"));
//    console.log($("div").attr("con"))
//    console.log($("div").attr("con","c2"))

//    console.log($(":checkbox:first").attr("checked"))
//    console.log($(":checkbox:last").attr("checked"))
//
//    console.log($(":checkbox:first").prop("checked"))
//    console.log($(":checkbox:last").prop("checked"))

//    console.log($("div").prop("con"))
//    console.log($("div").prop("class"))

//    console.log($("#id1").html());
//    console.log($("#id1").text());
    //console.log($("#id1").html("<h1>YUAN</h1>"))
    //console.log($("#id1").text("<h1>YUAN</h1>"))

    //固有属性
//    console.log($(":text").val());
//    console.log($(":text").next().val())
//    $(":text").val("789");

    //$("div").css({"color":"red","background-color":"green"})


</script>
</body>
</html>

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>1111</p>
<p>2222</p>
<p>3333</p>

<script src="jquery-3.1.1.js"></script>

<script>
    arr=[11,22,33];

//    for (var i=0;i<arr.length;i++){
//        $("p").eq(i).html(arr[i])
//
//    }

//方式一
    $.each(arr,function (x,y) {
        console.log(x);
        console.log(y);
    });
//方式二
    $("p").each(function () {
        console.log($(this));
        $(this).html("hello")
    })

</script>



</body>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


  <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>
<hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>

<script src="jquery-3.1.1.js"></script>
<script>
    function selectall() {
        $(":checkbox").each(function () {
            $(this).prop("checked",true)
        })
    }
    
    function cancel() {
         $(":checkbox").each(function () {
            $(this).prop("checked",false)
        })
    }

    function reverse() {
         $(":checkbox").each(function () {
            if($(this).prop("checked")){
                $(this).prop("checked",false)
            }

            else {
                $(this).prop("checked",true)
            }
        })
    }
</script>
</body>
</html>

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


<script src="jquery-3.1.1.js"></script>
<script>
    function action2(self) {

          //$(self).parent().addClass("hide").prev().addClass("hide");

//        $(self).parent().prev().addClass("hide")
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

    }
    
    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }
//    function action2(self){
//        $(self).parent().parent().children(".models,.shade").addClass("hide")
//
//    }
</script>
</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div class="c1">
    <p>PPP</p>

</div>

<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
        $("button").click(function () {
           //$(".c1").append("<h1>HELLO YUAN</h1>")

            var $ele=$("<h1></h1>");
            $ele.html("HELLO WORLD!");
            $ele.css("color","red");

//内部插入
            //$(".c1").append($ele);
            //$ele.appendTo(".c1")
            //$(".c1").prepend($ele);
            //$ele.prependTo(".c1")

//外部插入
            //$(".c1").after($ele)
            //$ele.insertAfter(".c1")
            //$(".c1").before($ele)
            //$ele.insertBefore(".c1")
//替换
             //$("p").replaceWith($ele)

//删除与清空
            //$(".c1").empty()
            //$(".c1").remove()

//clone
//             var $ele2= $(".c1").clone();
//             $(".c1").after($ele2)
        })
</script>
</body>
</html>

增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>

</div>


<script src="jquery-3.1.1.js"></script>
<script>

    function add(self) {

        //var $clone_obj=$(".item").clone();
        var $clone_obj=$(self).parent().clone();
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");

        $(".outer").append($clone_obj)
    }

    function remove_obj(self) {
        $(self).parent().remove()
    }
</script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div1 {
            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .outer {
            border: 1px solid rebeccapurple;
            padding: 20px;
            margin: 2px;
            background-color: yellowgreen;
        }

        .div2 {
            width: 200px;
            height: 100px;
            background-color: antiquewhite;
        }

        .outer {
            position: relative;
        }

    </style>

</head>
<body>
<div class="div1"></div>
<div class="outer"></div>
<div class="div2"></div>

<script src="jquery-3.3.1.js"></script>
<script>
    // 相对于视口的偏移量
    console.log($(".div1").offset().top) // 0
    console.log($(".div1").offset().left); // 0
    console.log($(".div2").offset().top); // 146
    console.log($(".div2").offset().left); // 0

    // position(): 相对于已经定位的父标签的偏移量
    console.log($(".div1").position().top) // 0
    console.log($(".div1").position().left); // 0
    console.log($(".div2").position().top); // 146
    console.log($(".div2").position().left); // 0

    console.log($(".div1").height("300px"));
    console.log($("div1").innerHeight()); // undefined
    console.log($(".div1").outerHeight()); // 300
    console.log($(".div1").outerHeight(true)); // 300


</script>

</body>
</html>

偏移量offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div2{
            width: 100%;
            height: 800px;
        }
        .div1{
            width: 40%;
            height: 150px;
            background-color: antiquewhite;
            overflow: auto;
        }
        .div2{
            background-color: rebeccapurple;
        }

         .returnTop{
             position: fixed;
             right: 20px;
             bottom: 20px;
             width: 90px;
             height: 50px;
             background-color: gray;
             color: white;
             text-align: center;
             line-height: 50px;
         }

         .hide{
             display: none;
         }

    </style>
</head>
<body>


<div class="div1">
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
</div>

<div class="div2">
    <button onclick="returnTop()">return</button>
</div>

<div class="returnTop hide" onclick="returnTop()">返回顶部</div>

<script src="jquery-3.1.1.js"></script>
<script>


    window.onscroll=function () {


//        console.log($(window).scrollTop());

        if($(window).scrollTop()>300){
            $(".returnTop").removeClass("hide")
        }else {
            $(".returnTop").addClass("hide")
        }


    };

    function returnTop() {
        $(window).scrollTop(0)

    }

    $(".div2 button").click(function () {
         $(".div1").scrollTop(0)
    })



</script>
</body>
</html>

GoTop

    // 事件准备加载方式一
//    $(document).ready(function () {
//         $("ul li").html(5);
//    });
// 事件准备加载方式二
     $(function () {
        $("ul li").html(5);
     });

常用事件
   blur([[data],fn])   失去焦点
   focus([[data],fn]) 获取焦点（搜索框例子）
   change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
   click([[data],fn]) 点击
   dblclick([[data],fn]) 双击
   scroll([[data],fn])   滚动
   submit([[data],fn])   提交

不常用事件
   error([[data],fn])
   focusin([data],fn)
   focusout([data],fn)
   keydown([[data],fn])   按下
   keypress([[data],fn]) 按键
   keyup([[data],fn])     键松开
   mousedown([[data],fn]) 鼠标按下
   mouseenter([[data],fn]) 鼠标移进去
   mouseleave([[data],fn]) 鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件
   mousemove([[data],fn])   鼠标移动
mouseout([[data],fn]) 鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件
   mouseover([[data],fn]    鼠标悬停
   mouseup([[data],fn])     鼠标弹起
   resize([[data],fn]) 元素窗口发生变化
   select([[data],fn])
   unload([[data],fn])
   补充：
      文档树加载完之后绑定事件（绝大多数情况下）
      第一种：吧script放在后面。
      第二种：
      $(document).ready(function(){
         // 绑定事件的代码
         ....
      })

      简写：
      $(function($){
         // 绑定事件的代码
         ....
      });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script src="jquery-3.1.1.js"></script>
<script>
    // 事件准备加载方式一
//    $(document).ready(function () {
//         $("ul li").html(5);
//    });
// 事件准备加载方式二
     $(function () {
        $("ul li").html(5);
     });

//事件绑定简单形式
//    var eles=document.getElementsByTagName("li")
//    eles.onclick=function () {
//        alert(123)
//    }

//    $("ul li").click(function () {
//        alert(6666)
//    });

//    $("ul li").bind("click",function () {
//        alert(777)
//    });

    //事件委托
//    $('ul').on("click","li",function () {
//       alert(999);
//    });
//
//    $("button").click(function () {
//
//            var $ele=$("<li>");
//            var len=$("ul li").length;
//            $ele.html((len+1)*1111);
//            $("ul").append($ele)
//    });
   // $("ul li").unbind("click")

</script>
</head>
<body>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<button>add</button>

</body>
</html>

事件委派

slideDown，slideUp， slideToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            /*display: none;*/
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">hello world</div>

</body>
</html>

动画效果

fadeIn，fadeOut，fadeToggle

fadeTo(1000,0.5) // 可调透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(2000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(2000);

   });

    $("#toggle").click(function(){
       $("#id1").fadeToggle(2000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,1);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style=" 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

动画效果2

show, hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script>

    function f1() {
      $("div").show(1000,function () {
          alert("show")
      })
    }

  function f2() {
      $("div").hide(1000,function () {
          alert(1243)
      })
    }

     function f3() {
      $("div").toggle(1000)
    }
</script>

</body>
</html>

动画效果

mouseover，mousedown，mouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
       <style>

           *{
               margin: 0;
               padding: 0;
           }
        .box{
            width: 500px;
            height: 200px;
            position: absolute;
        }

        .title{
            background-color: black;
            height: 50px;
            width: 500px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .content{
            width: 500px;
            height: 150px;
            background-color: antiquewhite;
        }
    </style>


    <script>
        $(function () {

          $(".title").mouseover(function () {
              $(this).css("cursor","pointer");
        }).mousedown(function (e) {

                  var eve = e || window.event;
                // 原始鼠标横纵坐标位置

                  var old_m_x=eve.clientX;
                  var old_m_y=eve.clientY;
//                  console.log(old_x);
//                  console.log(old_y);

                 var old_box_y=$(this).parent().offset().top ;
                 var old_box_x=$(this).parent().offset().left ;

                  $(this).bind("mousemove",function (eve) {
                      var new_m_x=eve.clientX;
                      var new_m_y=eve.clientY;

                      var m_x=new_m_x-old_m_x;
                      var m_y=new_m_y-old_m_y;



                  //$(".box").css({"top":old_box_y+m_y+"px","left":old_box_x+m_x+"px"})

                var x = old_box_x + m_x;
                var y = old_box_y + m_y;

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
                  })
              })
          }).mouseout(function(){
            $(this).unbind('mousemove');
        })

    </script>
</head>
<body>


<div class="box">
    <div class="title">标题</div>
    <div class="content">内容</div>
</div>

</body>
</html>

View Code

用css 添加手状样式,鼠标移上去变小手,变小手 




用css 添加手状样式,鼠标移上去变小手,变小手


cursor:pointer;

用JS使鼠标变小手onmouseover(鼠标越过的时候)
onmouseover="this.style.cursor='hand'"








cursor其他取值  
auto                    ：标准光标  
default                 ：标准箭头  
pointer, hand                   ：手形光标  
wait                     ：等待光标  
text                      ：I形光标  
vertical-text          ：水平I形光标  
no-drop                ：不可拖动光标  
not-allowed           ：无效光标  
help                     ：帮助光标  
all-scroll         ：三角方向标  
move                     ：移动标  
crosshair           ：十字标  
e-resize  
n-resize  
nw-resize  
w-resize  
s-resize  
se-resize  
sw-resize

extend

1、jQuery扩展语法

把扩展的内容就可以写到xxxx.js文件了，在主文件中直接导入就行了。

用法1、$.xxx() 
   $.extend({
       "GDP": function () {
          console.log("戴小红花");       
　　}    
});    
- 给jQuery添加扩展    - $.GDP()
用法2、$("").xxx()    
$.fn.extend({       
　　　　"BJG": function () {
          console.log("英语八级就是好！");
       }
    })    
- 给jQuery对象添加扩展
    - $(":input").BJG()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>

<p>111</p>
<p>222</p>
<p>333</p>

<script>



//    $.each(obj,function () {
//
//    });
//
//    $("").each(function () {
//
//    })


    $.extend({
        Myprint:function () {
            console.log("hello")
        }
    });

//    $.Myprint();

    $.fn.extend({
        GetText:function () {
//            for(var i=0;i<this.length;i++){
//                console.log(this[i].innerHTML)
//            }

            $.each($(this),function (x,y) {

                //console.log(y.innerHTML)
                //console.log($(y).html())
            })

        }
    });

    $("p").GetText()

</script>
</body>
</html>

第一步：不完美

$.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
那么如果这样定义一个函数，其他的扩展都可以调用这个函数了
这个函数只想在自己调用。不想让它公共的调用，不让他起冲突
那么定义一个私有的。用一个匿名函数
function foo() {
    console.log("英语八级就是牛")
}
$.fn.extend({
    "BJG":function () {
        foo()
        console.log("就这样吧")
    }
});

继续第二步：加上匿名函数

匿名函数：foo方法只想自己用，不想让别人调用
(function () {
    $.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
    function foo() {  函数的内部可以调用，外部就不可以调用了
    console.log("英语八级就是牛")
    }
})();


(function () {
    $.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})();

第三步、越趋于完美：既不可以让别人在外部随意调用，也可以避免别人修改$

// 如果怕$被别人改，那么就传个参数进去
(function (jq) {
    jq.extend({
       "GDP":function () {
           foo();
          console.log("带小红花")
       },   //可以扩展多个（加上逗号在写几个）
        "SGS":function () {
          console.log("你蛤蟆")
    }
});
    function foo() {
    console.log("英语八级就是牛")
    }
})(jQuery);


(function (jq) {
    jq.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>


    <style>
            .outer{
                width: 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;
            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;


           }

           .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }
    </style>

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <!--<li class="active"></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>

<script>
    var i=0;
//  通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");


// 手动轮播
    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自动轮播
    var c=setInterval(GO_R,1500);


    function GO_R() {

        if(i==img_num-1){
            i=-1
        }
         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }


    function GO_L() {
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)


    }
    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });
    
// button 加定播 
    $(".right").click(GO_R);
    $(".left").click(GO_L)



</script>
</body>
</html>

轮播图