前端神器之jquery

 jquery介绍                

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

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

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

 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

实例：全反选

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

实例：左侧菜单

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

实例：返回顶部-滑轮滚动监听事件

<!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>
View Code

  

posted @ 2018-10-23 16:49  DreamBoy_张亚飞  阅读(245)  评论(0)  编辑  收藏  举报