前端神器之jquery

時間 2019-12-09

標籤前端神器 jquery 欄目 JQuery 简体版

原文原文鏈接

jquery介紹

jQuery是目前使用最普遍的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其餘庫。微軟公司甚至把jQuery做爲他們的官方庫。javascript

jQuery的版本分爲1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。css

jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就能夠使用。html

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口號和願望 Write Less, Do More（寫得少，作得多）java

一、http://jquery.com/ 官方網站
二、https://code.jquery.com/ 版本下載jquery

jquery的特色：

1.jQuery 是一個 JavaScript 庫。

2.jQuery 極大地簡化了 JavaScript 編程。

3.jQuery 很容易學習。

查找元素

1.選擇器

　　基本選擇器
    $("div").css("color","red")
    $("*").css("color","red")
    $("#p1").css("color","red")

    $(".outer").css("color","red")

    $(".inner,p,div").css("color","red")


    層級選擇器

    $(".outer p").css("color","red")
    $(".outer>p").css("color","red")
    $(".outer+p").css("color","red")
    $(".outer~p").css("color","red")

    基本篩選器

    $("li:first").css("color","red")
   $("li:eq(0)").css("color","red") //序號
    $("li:gt(2)").css("color","red") //大於
    $("li:even").css("color","red") //偶數
    $("li:lt(2)").css("color","red") //小於

    屬性選擇器
    $("[alex='sb'][id='p1']").css("color","red")

    表單選擇器
     $("[type='text']").css("width","200px")
     $(":text").css("width","400px")

2.篩選器

 篩選器
    $("li").eq(2).css("color","red");
    $("li").first().css("color","red");
    $("li").last().css("color","red");

    查找篩選器

    $(".outer").children("p").css("color","red");
    $(".outer").find("p").css("color","red");

    $("li").eq(2).next().css("color","red");
    $("li").eq(2).nextAll().css("color","red");
    $("li").eq(2).nextUntil("#end").css("color","red");

    $("li").eq(4).prev().css("color","red");
    $("li").eq(4).prevAll().css("color","red");
    $("li").eq(4).prevUntil("li:eq(0)").css("color","red");

    console.log($(".outer .inner p").parent().html())
   $(".outer .inner p").parents().css("color","red");
   $(".outer .inner p").parentsUntil("body").css("color","red");

實例：模態對話框編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
        }
        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="content">
    <button onclick="show(this)">show</button>kjdksnakdnaskldsdkldladksladdkaldadkal
</div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel(this)">cancel</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    function show(self) {
        $(self).parent().siblings().removeClass('hide');
    }
    function cancel(self) {
        // $(self).parent().addClass('hide');
        // $(self).parent().prev().addClass('hide');
        // $(self).parent().parent().children('.model,.shade').addClass('hide');
        $(self).parent().prev().addClass('hide').next().addClass('hide');
    }

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

View Code

實例：層次菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        }
        .content div{
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        }
        .item .title{
            background-color: #4cae4c;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
        .content .active{
            display: block;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜單一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜單二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜單三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字內容一</div>
        <div>tab文字內容二</div>
        <div>tab文字內容三</div>
        <div>tab文字內容四</div>
        <div>tab文字內容五</div>
        <div>tab文字內容六</div>
        <div>tab文字內容七</div>
        <div>tab文字內容八</div>
        <div>tab文字內容九</div>
    </div>

    <script>
        function show(self) {
            $(self).next().slideDown().parent().siblings().children('.con').slideUp();
            // $(self).next().removeClass('hide');
            // $(self).parent().siblings().children('.con').addClass('hide');
            // $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
        }
        $('.item .current div').click(function () {
            $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
        });

        $('.item .next div').click(function () {
            $('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
        });

        $('.item .next1 div').click(function () {
            $('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
        });

        // function show1(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
        // }
        // function show2(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
        // }
    </script>
</div>
</body>
</html>

View Code

操做元素

1.屬性操做

--------------------------屬性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

<script>
    console.log($('.div1').hasClass('fei'));
    console.log($('.div1').attr('con'));
    console.log($('.div1').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>zhang</h1>'));
    console.log($('#id1').text('<h1>zhang</h1>'));

    console.log($(':text').val()); //必須是固有屬性
    console.log($(':text').next().val());
    console.log($(':text').val('789'));

    $('#id1').css({'color':'red','background-color':'blue'});
</script>

View Code

2.CSS操做

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .div1,.div2{
            width: 200px;
            height: 1000px;
        }
        .div1{
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            background-color: #4cae4c;
        }
        .div2{
            background-color: #0077cc;
        }
        .outer{
            position: relative;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    //相對於視口的偏移量
    console.log($('.div1').offset().top);
    console.log($('.div1').offset().left);

    console.log($('.div2').offset().top);
    console.log($('.div2').offset().left);
    //相對於已定位父級的偏移量
    console.log($('.div1').position().top);
    console.log($('.div1').position().left);

    console.log($('.div2').position().top);
    console.log($('.div2').position().left);

    // console.log($('body').scrollTop())
    console.log($('.div1').height('300'));
    console.log($('.div1').innerHeight()); //包括padding
    console.log($('.div1').outerHeight()); //包括border和padding
    console.log($('.div1').outerHeight(true)); //包括border和padding和margin

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

View Code

3.文檔處理

//建立一個標籤對象
    $("<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</title>
</head>
<body>
<div class="c1">
    <p>ppppp</p>
</div>
<button>add</button>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $('button').click(function () {
        // $('.c1').append('<h1>hello</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);
        //替換
        // $('p').replaceWith($ele);
        //刪除與清空
        // $('.c1').empty();
        // $('.c1').remove();
        //複製
        var $ele1 = $(self).clone();
        $('.c1').after($ele1);

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

View Code

克隆練習：瀏覽器

<!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="js/jquery-3.1.1.js"></script>
<script>
    function add(self) {
        var $clone = $(self).parent().clone();
        $clone.children('button').text('-').attr('onclick','remove(this)');
        $('.outer').append($clone);
    }
    function remove(self) {
        $(self).parent().remove();
    }
</script>
</body>
</html>

View Code

實例：全反選app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<button onclick="selectall()">全選</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反選</button>
<hr>
<table border="1px;">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectall() {
        $(':checkbox').each(function () {
            $(this).prop('checked',true);
        })
    }
    function cancel() {
        $(':checkbox').each(function () {
            $(this).prop('checked',false);
        })
    }
    function reverse() {
        $(':checkbox').each(function () {
            $(this).prop('checked',!$(this).prop('checked'));
            // if($(this).prop('checked')==false){
            //     $(this).prop('checked',true);
            // }
            // else{
            //     $(this).prop('checked',false)
            // }
        })
    }
</script>
</body>
</html>

View Code

實例：左側菜單dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        }
        .content div{
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        }
        .item .title{
            background-color: #4cae4c;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
        .content .active{
            display: block;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜單一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜單二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜單三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字內容一</div>
        <div>tab文字內容二</div>
        <div>tab文字內容三</div>
        <div>tab文字內容四</div>
        <div>tab文字內容五</div>
        <div>tab文字內容六</div>
        <div>tab文字內容七</div>
        <div>tab文字內容八</div>
        <div>tab文字內容九</div>
    </div>

    <script>
        function show(self) {
            $(self).next().slideDown().parent().siblings().children('.con').slideUp();
            // $(self).next().removeClass('hide');
            // $(self).parent().siblings().children('.con').addClass('hide');
            // $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
        }
        $('.item .current div').click(function () {
            $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
        });

        $('.item .next div').click(function () {
            $('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
        });

        $('.item .next1 div').click(function () {
            $('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
        });

        // function show1(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
        // }
        // function show2(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
        // }
    </script>
</div>
</body>
</html>

View Code

事件

頁面載入
    ready(fn)  //當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。
    $(document).ready(function(){}) -----------> $(function(){})

事件處理
    $("").on(eve,[selector],[data],fn)  // 在選擇元素上綁定一個或多個事件的事件處理函數。

    //  .on的selector參數是篩選出調用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定
    //  click事件；

    [selector]參數的好處:
        好處在於.on方法爲動態添加的元素也能綁上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的綁定方式和
        //$('ul li').bind('click', function(){console.log('click');})同樣；我經過js給ul添加了一個
        //li：$('ul').append('<li>js new li<li>')；這個新加的li是不會被綁上click事件的

        //可是用$('ul').on('click', 'li', function(){console.log('click');}方式綁定，而後動態添加
        //li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件
    
    [data]參數的調用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
<script>
    //1.頁面加載
    // $(document).ready(function () {
    //     $('ul li').html(6);
    // });
    // $(function () {
    //     $('ul li').html(666);
    // });
    //2.事件綁定簡寫
    $(function () {
        $('li').click(function () {
        alert('666666');
    });
    // $('li').unbind('click');
    // $('ul li').bind('click',function () {
    //     alert('666666');
    // })
    $('button').click(function () {
            var $ele=$('<li>');
            var len=$('ul li').length;
            $ele.html((len+1)*111);
            $('ul').append($ele);
    })

    //3.事件委託
    $('ul').on('click','li',function () {
        alert('666666');
    })
    });
</script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<button>add</button>

</body>
</html>

View Code

實例：返回頂部-滑輪滾動監聽事件ide

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

        .div2{
            width: 100%;
            height: 1000px;
        }
        .div1{
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            width: 40%;
            height: 150px;
            overflow: scroll;
            background-color: #4cae4c;
        }
        .div2{
            background-color: #0077cc;
        }
         .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>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
</div>
<div class="div2">
    <button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回頂部</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    window.onscroll=function () {
        console.log($(window).scrollTop());
        if($(window).scrollTop()>100){
            $('.returnTop').removeClass('hide');
        } else{
            $('.returnTop').addClass('hide');
        }
    };
    // function returnTop() {
    //     // $(window).scrollTop(0);
    //     $('.div1').scrollTop(0);
    // }
    $('.div2 button').click(function () {
        $('.div1').scrollTop(0);
    })

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

View Code

動畫效果

顯示隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="show()">顯示</button>
<button ONCLICK="hide()">隱藏</button>
<button onclick="qiehuan()">切換</button>

<script src="js/jquery-3.1.1.js"></script>
<script>
    function show() {
        $('div').show(1000);
    }

    function hide() {
        $('div').hide(1000,function () {//回調函數：動畫效果完成以後會觸發
            alert('隱藏了！')
        });
    }
    function qiehuan() {
        $('div').toggle(1000);
    }
</script>
</body>

</html>

View Code

滑動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.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">helloworld</div>

</body>
</html>

View Code

淡入淡出

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


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

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


   });
    $("#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="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

View Code

擴展方法

<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="js/jquery-3.1.1.js"></script>
<script>
    //jquery調用方法
    // $.each(obj,function () {
    //
    // });
    // $('').each(function () {
    //
    // });
    $.extend({
        Myprint:function () {
            console.log('hello')
        }
        });
    $.Myprint();
    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({
        get_text: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').get_text();
</script>
</body>
</html>

View Code

實例：輪播圖

猛擊下載 輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
</head>
<style>
    body{
        background-color: black;
    }
    .main{
        position: relative;
        width: 1000px;
        height: 400px;
        overflow: hidden;
        margin: 100px auto;
    }
    .main ul.img li{
        position: absolute;
        top: 0;
        left: 0;
        list-style: none;
    }

    .main ul li img{
        width: 1000px;
        height: 400px;
    }
    .main .dom{
        position: absolute;
        bottom: 20px;
        left: 340px;
        /*width: 200px;*/
        list-style: none;
    }
    .main .dom li{
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: white;
        margin-left: 40px;
        text-align: center;
        line-height: 18px;
        opacity: 90%;
        cursor: pointer;
    }
    .btn{
        display: none;
        background-color: lightgray;
        position: absolute;
        top: 40%;
        width: 30px;
        height: 60px;
        cursor: pointer;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        opacity: 0.7;
    }
    .left{
        left: 0px;
    }
    .right{
        right: 0px;
    }
    .main:hover .btn{
        display: block;
    }
    .main ul.dom .active{
        background-color: red;
    }
    .hide{
        display: none;
    }
</style>
<body>
<div class="main">
    <ul class="img">
        <li><a href=""><img src="images/beijing3.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing2.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing1.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/xiaomen.png" alt=""></a></li>
    </ul>
    <span class="btn left"><</span>
    <span class="btn right">></span>
    <ul class="dom">
        <!--<li class="active"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>
</div>

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

    //經過jquery自動建立按鈕標籤
    var img_num = $('.img li').length;
    for(var i=0;i<img_num;i++){
        $('.dom').append('<li></li>');
    }
    $('.dom li').eq(0).addClass('active');

    //手動輪播
    var num = 0;
    $('.dom li').mouseover(function () {
        num = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        // $('.img li').eq(index).show().siblings().hide();
        // $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    })

    //自動輪播
    var clock = setInterval(auto_play,3000);
    function auto_play() {
        if (num==img_num-1){
            num=-1;
        }
        num++;
        $('.dom li').eq(num).addClass('active').siblings().removeClass('active');
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function play_L() {
        if (num==0){
            num=img_num;
        }
        num--;
        $('.dom li').eq(num).addClass('active').siblings().removeClass('active');
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }

    //鼠標懸浮
    $('.main').hover(function () {
        clearInterval(clock);
    },function () {
        clock = setInterval(auto_play,3000);
    });

    //button加定播
    $('.right').click(auto_play);
    $('.left').click(play_L);

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