zoukankan      html  css  js  c++  java

  • 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=" 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; 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>
    轮播图

    抽屉 演示 

    　　

     

    　　

     

    　　

    苑昊   
  • 相关阅读:
    HDU1720 A+B Coming
    HDU1390 ZOJ1383 Binary Numbers
    HDU1390 ZOJ1383 Binary Numbers
    HDU2504 又见GCD
    HDU2504 又见GCD
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1020 ZOJ2478 Encoding
    HDU1020 ZOJ2478 Encoding
    HDU2097 Sky数
  • 原文地址：https://www.cnblogs.com/golangav/p/6924890.html
Copyright © 2011-2022 走看看