jquery

一.寻找元素(选择器和筛选器)

a.选择器

1.基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2.层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.基本筛选器　　

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

4.属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

5.表单选择器

$("[type='text']")----->$(":text")       
#注意只适用于input标签  : $("input:checked")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script src="jquery-3.2.1.js"></script>

<script>
    $("li").css("color","red");   #数组

    $("li:first").css("color","red");      #第一个
    $("li:last").css("color","red");        #第二个

    $("li:eq(2)").css("color","red");       #查找索引

    $("li:even").css("color","red");      #基数行

    $("li:odd").css("color","red");        #偶数行

    $("li:gt(1)").css("color","red");       #大于某个数


    $("li:lt(2)").css("color","red");       #小于某个数



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

基本选择器演示

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


<p alex="sb">1111</p>
<p alex="sb">1111</p>
<p alex="sb" id="p4">1111</p>


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

<script>

    $("[alex]").css("color","red")      #都变红

    $("[alex='sb']").css("color","red")     #都变红

    $("[alex='sb'][id='p4']").css("color","red")    #最后一个变红

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

属性选择器演示

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


<input type="text">
<input type="checkbox">
<input type="submit">



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

<script>

    $("[type='text']").css("width","300px");

    $(":text").css("width","300px");     #简写

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

表单选择器演示

b.筛选器

1.过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

2.查找筛选器

$("div").children(".test")        $("div").find(".test")  
                               
$(".test").next()        $(".test").nextAll()        $(".test").nextUntil() 
                           
$("div").prev()          $("div").prevAll()           $("div").prevUntil()   
                        
$(".test").parent()     $(".test").parents()        $(".test").parentUntil() 

$("div").siblings()

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

    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;
         }


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick=show(this);>菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick=show(this);>菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick=show(this);>菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>

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

<script>
          function show(self){
              $(self).next().removeClass("hide");
              $(self).parent().siblings().children(".con").addClass("hide");

          }
</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>


     <table border="1" id="Table">
         <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.2.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.2.1.js"></script>
<script>

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

    }
    function action2(self){

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

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

模态窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .outer{
            width: 80%;
            margin: 20px auto;
        }

        .nav li{
            list-style: none;
            float: left;
            width: 33.2%;
            height: 40px;
            background-color: wheat;
            text-align:center;
            line-height: 40px;
            border-right: solid 1px green;
        }

        .nav:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
            font-size:0;
        }

        .content{
            width: 100%;
            height: 400px;
            background-color: yellowgreen;
        }

        ul .active{
            background-color: #204982;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>


<div class="outer">
    <ul class="nav">
        <li xxx="con1" class="active" onclick="tab(this)">菜单一</li>
        <li xxx="con2" onclick="tab(this)">菜单二</li>
        <li xxx="con3"onclick="tab(this)">菜单三</li>
    </ul>

    <div class="content">
        <div class="con1">111</div>
        <div class="con2 hide">222</div>
        <div class="con3 hide">333</div>
    </div>
</div>

<script src="jquery-3.2.1.js"></script>
<script>
    function tab(self) {
        var index=$(self).attr("xxx");
        $("."+index).removeClass("hide").siblings().addClass("hide")
        $(self).addClass("active").siblings().removeClass("active")


    }
</script>


</body>
</html>

Tab 切换演示

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

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

    <button>button</button>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $("button").click(function () {
            
            $("p").empty()
            
        })
    </script>

</body>
</html>

empty remove 演示

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

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

    <script src="jquery-3.2.1.js"></script>
    <script>
        function add(self) {
            var $clone_obj=$(self).parent().clone();
            $clone_obj.children("button").text("-");
            $clone_obj.children("button").attr("onclick","remove_obj(this)");

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

        function remove_obj(self) {
            $(self).parent().remove()
        }



    </script>

</body>
</html>

clone input标签演示

二.操作元素(属性，css，文档处理)

a.属性操作

#--------------------------属性
$("").attr();                  #新建属性  查看属性  修改属性  自己定义的属性
$("").removeAttr();
$("").prop();　　　　　　　　　　　#固有的属性
$("").removeProp();
#--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
#--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])        #取固有属性，input标签
#---------------------------
$("").css("color","red")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="div1" con="c1"></div>


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

    console.log($("div").attr("con"))  #查看属性的值

    $("div").attr("con","c2")           #修改属性

    $("div").attr("alex","c2")          #新建属性

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

attr 演示

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

<input type="checkbox" checked="checked">是否可见
<input type="checkbox" >是否可见


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

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

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

prop 演示

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


<div id="id1">
    <p>1111</p>
</div>


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

    console.log($("#id1").html());          #查找
    console.log($("#id1").text());          #查找
    
    $("#id1").html("<h2>hello word</h2>")    #赋值   

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

html text 演示

b.文档处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");    #自己插兄弟
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");       #兄弟插自己
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()　　　　　　　　　　#标签还在，内容清空
    $("").remove([expr])　　　　　　#标签和内容都清空

//复制

    $("").clone([Even[,deepEven]])

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

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

    <button>add</button>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $("button").click(function () {
            var $ele=$("<h1></h1>");
            $ele.html("hello word");
            $ele.css("color","red");

//            $(".c1").append($ele);        #父亲增加儿子
            
            $ele.appendTo(".c1") ；           #儿子增加父亲
        })
    </script>

</body>
</html>

append appendTo 演示

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

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

    <button>add</button>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $("button").click(function () {
            var $ele=$("<h1></h1>");
            $ele.html("hello word");
            $ele.css("color","red");

            $("p").replaceWith($ele);


        })
    </script>

</body>
</html>

replaceWith 替换演示

c. css操作

#CSS
$("").css(name|pro|[,val|fn])


#  位置
$("").offset([coordinates])　　#相对于视口的偏移量
$("").position()　　　　　　　　 #相对于已经定位的父标签的偏移量
$("").scrollTop([val])
$("").scrollLeft([val])


# 尺寸
$("").height([val|fn])　　　　　　#高
$("").width([val|fn])
$("").innerHeight()　　　　　　　　#加上内边距高
$("").innerWidth()
$("").outerHeight([soptions])   #内容+内边距+boder    +True参数，就加上了margin
$("").outerWidth([options])

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

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 200px;
            height: 200px;
        }

        .div1{
            background-color: #84a42b;
        }

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

</head>
<body>


<div class="div1"></div>
<div class="div2"></div>


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

    console.log($(".div2").offset().top)
    console.log($(".div2").offset().left)

</script>

</body>
</html>

offset 演示

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

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 200px;
            height: 200px;
        }

        .div1{
            background-color: #84a42b;
        }

        .div2{
            background-color: red;
        }

        /*.outer{*/
            /*position: relative;*/
        /*}*/
    </style>

</head>
<body>


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

<div class="outer">

    <div class="div2"></div>
</div>



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

    console.log($(".div1").position().top);
    console.log($(".div1").position().left);


    console.log($(".div2").position().top);
    console.log($(".div2").position().left);
</script>

</body>
</html>

position 演示

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

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 200px;
            height: 100px;
        }

        .div1{
            background-color: #84a42b;
            border: 3px solid blue;
            padding: 20px;
            margin: 1px;
        }

        .div2{
            background-color: red;
        }


    </style>

</head>
<body>


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

<div class="outer">

    <div class="div2"></div>
</div>



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

    console.log($(".div1").height());
    console.log($(".div1").innerHeight());
    console.log($(".div1").outerHeight(true));



</script>

</body>
</html>

尺寸演示

三. 循环

a.方式一

<script>
    arrs=[11,22,33];
    arrs={"name":"egon","age":18}

    $.each(arrs,function (i,j) {
        console.log(i);
        console.log(j);
    })
    
</script>

b.方式二　　

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

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

<script>

    $("p").each(function () {
        $(this).html("hello")
    })

</script>

四. 事件

# 事件绑定

bind

unbind

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

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 100%;
            height: 800px;
        }

        .div1{
            background-color: #84a42b;
        }

        .div2{
            background-color: red;
        }

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

        .returnTop{
            display: none;
        }
    </style>

</head>
<body>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>555</li>
</ul>

<buton>add</buton>
<script src="jquery-3.2.1.js"></script>
<script>
//    $("ul li").click(function () {
//        alert("123")
//    })

    $("ul li").bind("click",function () {        #绑定事件
        alert(123)
    });

    $("ul li").unbind("click")            #解除绑定

   
</script>

</body>
</html>

bind unbind 演示

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

</head>
<body>


<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<button>add</button>
<button class="off_p">off</button>

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


     $(".off_p").click(function(){
           $("ul").off();                // 解除所有事件
     });


     $("button:first").click(function(){
          $("ul").append("<li>222</li>")});


    $("ul").on("click","li",function(){
        alert(100)
    })


</script>


</body>
</html>

on 事件绑定解除绑定演示

五.动画效果

hide()       #显示
show()      #隐藏
toggle()    #切换


slideDown()    #滑入
slideUp()        #滑出
slideToggle()  #切换


fadeIn()           #淡入
fadeOut()         #淡出
fadeToggle()     #切换
fadeTo(1000,0.4)   #透明度

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

<div>hello</div>


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

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

<script>

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

    function f2() {
        $("div").hide(1000)
    }
    
    function f3() {
        $("div").toggle(1000)
    }
    

</script>

</body>
</html>

显示隐藏切换演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.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: darkgrey;
            border: solid 1px blueviolet;
            padding: 50px;
        }
    </style>
</head>
<body>



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

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

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


</body>
</html>

滑入滑出演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.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,0.4);

   });
});



    </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>

谈入谈出演示

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

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>

回调函数

六. 扩展方法 (插件机制)

<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

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

    }
});

$("p").print();
</script>

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

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

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

<script>

    方式一：

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

    $.Myprint()


    方式二：

    $.fn.extend({
        GetText: function () {
            for (var i = 0; i < this.length; i++) {
                console.log($(this).text());

            }

        }
    });
    $("p").GetText();


</script>

</body>
</html>

两种方式演示

案例

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

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 100%;
            height: 800px;
        }

        .div1{
            background-color: #84a42b;
        }

        .div2{
            background-color: red;
        }

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

        .returnTop{
            display: none;
        }
    </style>

</head>
<body>


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

<div class="div2"></div>

<div class="returnTop">返回顶部</div>


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

    $(".returnTop").click(function () {
        $(window).scrollTop(0);
    });

    window.onscroll=function () {
        if ($(window).scrollTop()>200){
            $(".returnTop").show();
        }
        else{
            $(".returnTop").hide();
        }
    }

</script>

</body>
</html>

滚动条返回顶部 scrollTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            width: 790px;
            height: 340px;
            margin: 20px auto;
            border: 1px darkgreen solid;
            position: relative;
        }
        ul.img{
            list-style: none;
        }

        ul.img li{
            position: absolute;
            top:0;
            left: 0;
            display: none;
        }

        .icon{
            position: absolute;
            bottom: 20px;;
            left: 220px;;
            list-style: none;
        }

        .icon li{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: gray;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 100%;
            margin-left: 14px;

        }

        .btn{
            position: absolute;
            top: 50%;
            width: 60px;
            height: 80px;
            background-color: grey;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            opacity: 0.7;
            margin-top: -40px;
            color: white;
        }

        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

        .icon .active{
            background-color: red;
        }

    </style>
</head>
<body>

<div class="outer">
    <ul class="img">
        <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li>
    </ul>

    <ul class="icon">
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
    </ul>

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


<script src="jquery-3.2.1.js"></script>
<script>
    var i=0;

    // 自动轮播：
    function move_right(){

        if(i==5){
            i=-1
        }
        i++;     //  i=2
        console.log(i);
        $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200);
    }

      function move_left(){

        if(i==0){
            i=6
        }

        i--;
        console.log(i);
        $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800);

    }
    var ID=setInterval(move_right,1000);

    // 手动轮播

    $(".outer").hover(function(){
            clearInterval(ID)
    },function(){
          ID=setInterval(move_right,1000)
    });

    $(".icon li").mouseover(function(){
         i=$(this).index();
         $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200);
    });


    // click事件
    $(".right").click(move_right);
    $(".left").click(move_left);

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

轮播图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

面板拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .outer{
            width: 790px;
            height: 340px;
            margin: 20px auto;
            border: 1px darkgreen solid;
            position: relative;
        }


        ul.img{
            list-style: none;
        }

        ul.img li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .icon{
            position: absolute;
            list-style: none;
            bottom: 20px;
            left: 220px;
            /*display: none;*/
            /*background-color: rebeccapurple;*/
        }

        .icon li{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: gray;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius:100%;
            margin-left: 14px;
        }

        .btn{
            position: absolute;
            top: 50%;
            width: 60px;
            height: 80px;
            background-color: #84a42b;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            opacity: 0.7;
            margin-top: -40px;
            color: white;
        }

        .show_hide{
            display: none;
        }

        .left{
            left:0;

        }

        .right{
            right: 0;
        }

        .icon .active{
            background-color: red;
        }


    </style>
</head>
<body>


<div class="outer">
    <ul class="img">
        <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li>
    </ul>

    <ul class="icon">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

    <div class="show_hide">

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



</div>

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

<script>
    var i=0;
    function move_right() {
        if (i==5){
            i = -1;
        }

        i++;
        $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200);
    }

    function move_left(){
        if(i==0){
            i=6
        }

        i--;
        console.log(i);
        $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800);
    }
    var ID=setInterval(move_right,1000);


    $(".outer").hover(function () {
        $(".show_hide").show();
        clearInterval(ID)
    },function () {
        $(".show_hide").hide();
        ID=setInterval(move_right,1000)
    });
    
    $(".icon li").mousemove(function () {
        i=$(this).index();
        $(".icon li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200);
    })


    $(".right").click(move_right);
    $(".left").click(move_left);


</script>





</body>
</html>

轮播图

抽屉演示

苑昊

posted @ 2017-05-31 16:42 golangav 阅读(442) 评论(0) 编辑收藏举报

刷新页面返回顶部