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

时间：2020-12-03 21:18:21

一、相关知识点总结
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>
<!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="width: 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>
用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>

轮播图

相关文章