js 系列(7) jquery (2)

Posted on Posted in js

jquery

1、 eq()整体排序

通过$()得到jQuery对象,可以继续通过eq()获得某一个元素。

下标问题:jQuery对象得到的原生对象会进行一个自己的排列,组成一个队列。eq()方法是从这个队列里去进行排序。与原来页面的结构无关。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin-bottom: 20px;
        }
        div p{
            float: left;
            width: 100px;
            height: 100px;
            background: #ccc;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p></p>
    <p></p>
</div>
<script>
    //希望每一个div里的下标为1的p变红
    //不能用一个下标1全部选中,选中的仅仅是所有被选中的p组成的队列里的第一个
    //$("div p").eq(1).css("background","red");
    // $("div p").eq(5).css("background","red");
    // $("div p").eq(9).css("background","red");
    // $("div p").eq(13).css("background","red");
    $("div p.cur").eq(1).css("background","red");
</script>
</body>
</html>

隔行变色

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table,tr,td{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<script>
    // 给行变色
    // $("tr:even").css("background","#ccc");

    //给列变色
    // $("td:even").css("background","#ccc");
    $("tr").each(function(){
        $(this).children("td:even").css("background","#ccc");
    });
</script>
</body>
</html>

2、 index()在兄弟关系中的排序

Index()这个方法获得的是元素在html结构中,在自己的同级元素中的位置,与获得的jQuery新队列没关系。

与新队列无关,与兄弟中的排行有关。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin-bottom: 20px;
        }
        div p{
            float: left;
            width: 100px;
            height: 100px;
            background: #ccc;
            margin-right: 20px;
        }
        .cur{
            background: #f00;
        }
    </style>
</head>
<body>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p></p>
    <p></p>
</div>
<script>
    //给p标签绑定事件,点击输出自己的index()
    $("div p.cur").click(function(){
        console.log($(this).index());
    });
</script>
</body>
</html>

3、 对应和排他

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            color: #252525;
            text-decoration: none;
        }
        .box{
            width: 310px;
            border-top: 2px solid #206f96;
            margin: 50px 50px;
            overflow: hidden;
            float: left;
        }
        .box .top{
            border-left: 1px solid #cfcfcf;
            overflow: hidden;
        }
        .box .top span{
            float: left;
            width: 102px;
            height: 29px;
            background: #f4f4f4;
            border-right: 1px solid #cfcfcf;
            border-left: 1px solid #cfcfcf;
            border-bottom: 1px solid #cfcfcf;
            margin-left: -1px;
            font-size: 14px;
            color: #252525;
            line-height: 29px;
            text-align: center;

        }
        .box .top span.current{
            background: none;
            border-bottom: none;
            font-weight: bold;
        }
        .box .top span a:hover{
            text-decoration: underline;
        }
        .box .bottom{
            padding: 17px 0 17px 9px;
            overflow: hidden;
        }
        .box .bottom ul{
            list-style: none;
            display: none;
        }
        .box .bottom ul.current{
            display: block;
        }
        .box .bottom ul li{
            height: 27px;
            font-size: 14px;
            color: #252525;
            line-height: 27px;
        }
        .box .bottom ul li.first{
            font-weight: bold;
        }
        .box .bottom ul li a:hover{
            color: #f00;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current"><a href="#">新闻</a></span>
        <span><a href="#">图片</a></span>
        <span><a href="#">军事</a> <a href="#">航空</a></span>
    </div>
    <div class="bottom">
        <ul class="current">
            <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
            <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
            <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
            <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
            <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
        </ul>
        <ul>
            <li class="first">离京访问捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
        <ul>
            <li class="first">捷克并出席核安全峰会</li>
            <li>习近平在捷克发文 热议 出访专题 这三年</li>
            <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
            <li>张德江会客 江泽民为《世界名曲45首》作序</li>
            <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
        </ul>
    </div>
</div>
<script>
    // $(".top span").mouseenter(function(){
    //  //自己的排他
    //  // $(this).addClass('current').siblings().removeClass('current');
    //  // //具体信息的排他
    //  // $(".bottom ul").eq($(this).index()).addClass('current').siblings().removeClass('current');

    //  //避免所有的tab栏大排序,所有的代码都是从事件元素自身出发去找关系
    //  $(this).addClass('current').siblings().removeClass('current').parent().siblings().children().eq($(this).index()).addClass('current').siblings().removeClass('current');
    // });

    //each方法分别操作每一个大的tab栏元素
    $(".box .top").each(function(){
        //通过每个遍历的top找到他对应的兄弟bottom里面的所有 ul
        var $ul = $(this).siblings().children();
        // 给遍历的这个top的儿子去添加事件
        $(this).children().mouseenter(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $ul.eq($(this).index()).addClass('current').siblings().removeClass('current');
        })
    })
</script>
</body>
</html>

4、 each()遍历jQuery对象

each()遍历我们jQuery对象里的元素队列。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin-bottom: 20px;
        }
        div p{
            float: left;
            width: 100px;
            height: 100px;
            background: #ccc;
            margin-right: 20px;
        }
        /*.cur{
            background: #f00;
        }*/
    </style>
</head>
<body>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
    <p class="cur"></p>
    <p></p>
</div>
<div>
    <p></p>
    <p class="cur"></p>
    <p></p>
    <p></p>
</div>
<script>
    // $("div").children().eq(1).css("background","red");
    //给每个p标签绑定事件,输出它的在队列里的下标
    $("div").each(function(i){
        //i就是每次进来遍历的元素的下标
        //this指向的就是每次进来的那个元素
        $(this).children().eq(1).css("background","red");
    });
</script>
</body>
</html>

有一个参数:function,函数参数,规定了遍历过程中对每一个元素做的工作。

$(“p”).each(function(){
     对每一个元素的操作。
});

function函数内部有一个默认的参数:i,指的就是这一次遍历的元素在整体队列里的下标。

$("div").each(function(i){
    //i就是每次进来遍历的元素的下标
    //this指向的就是每次进来的那个元素
    $(this).children().eq(1).css("background","red");
});

如果遇到:每一个元素内怎么样,一定要用each方法。

$("div").each(function(i){
    //i就是每次进来遍历的元素的下标
    //this指向的就是每次进来的那个元素
    $(this).children().eq(1).css("background","red");
});

制作:折叠选项卡的效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div.demo{
            width: 200px;
            overflow: hidden;
            border: 1px solid #000;
            margin-bottom: 20px;
            background: skyblue;
        }
        div.box{
            width: 200px;
            overflow: hidden;
        }
        div h2{
            font-size: 20px;
            line-height: 40px;
            padding-left: 10px;
            cursor: pointer;
        }
        div h2 span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            border: 1px solid #000;
            text-align: center;
            line-height: 20px;
            font-size: 14px;

        }
        div.box div{
            padding-left: 30px;
            line-height: 30px;
            font-size: 14px;
            display: none;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="box">
        <h2>
            <span>+</span>
            男装
        </h2>
        <div>
            <p>皮衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            女装
        </h2>
        <div>
            <p>毛衣</p>
            <p>打底裤</p>
            <p>风衣</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            童装
        </h2>
        <div>
            <p>毛衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
</div>
<div class="demo">
    <div class="box">
        <h2>
            <span>+</span>
            男装
        </h2>
        <div>
            <p>皮衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            女装
        </h2>
        <div>
            <p>毛衣</p>
            <p>打底裤</p>
            <p>风衣</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            童装
        </h2>
        <div>
            <p>毛衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
</div>
<div class="demo">
    <div class="box">
        <h2>
            <span>+</span>
            男装
        </h2>
        <div>
            <p>皮衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            女装
        </h2>
        <div>
            <p>毛衣</p>
            <p>打底裤</p>
            <p>风衣</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            童装
        </h2>
        <div>
            <p>毛衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
</div>
<div class="demo">
    <div class="box">
        <h2>
            <span>+</span>
            男装
        </h2>
        <div>
            <p>皮衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            女装
        </h2>
        <div>
            <p>毛衣</p>
            <p>打底裤</p>
            <p>风衣</p>
        </div>
    </div>
    <div class="box">
        <h2>
            <span>+</span>
            童装
        </h2>
        <div>
            <p>毛衣</p>
            <p>牛仔裤</p>
            <p>羽绒服</p>
        </div>
    </div>
</div>
<script>
    //获取h2元素,每一个添加点击事件
    // +号和-号切换,兄弟元素展开或收起
    $(".box h2").each(function(){
        var $h2 = $(this).parent().siblings().children("h2");
        $(this).click(function(){
            //自己的兄弟展开
            var $span = $(this).children("span");
            $span.html($span.html() == "+" ? "-" : "+");
            $(this).siblings().slideToggle(300);
            //其他h2的兄弟隐藏
            $h2.children("span").html("+");
            $h2.siblings().slideUp(300);
        })
    })
</script>
</body>
</html>

三、 animate动画

语法

.animate(结束位置JSON,运动总时间)

第一个参数必须是JSON对象:即便只有一个属性变化也需要写在JSON。

第二个参数是总时间:经过多长时间运动停止,习惯给一个变量during。

原来JS的代码:

var demo = document.getElementById("demo");
        var now = 100;
        var timer = setInterval(function(){
            now += 10;
            if(now >= 400){
                now = 400;
                clearInterval(timer);
            }
            demo.style.width = now + "px";
        },50);

jQuery的方法:

$(".demo").animate({"width":400},1500);

什么样的css属性能够做animate动画。

很多属性值为数值的属性可以参与运动。css3里面也有一部分可以参与,大部分不能参与的。

不能参与的:
"background-color" : "red" //css3的过渡动画可以完成
"background-position":"0 0"

//jQuery的运动函数方法
        $(".demo").animate({
            "width":200,
            "height":200,
            "opacity":0.5,
            "border-width":20,
            "left":200,
            "top":200,
            "padding":50,
            "border-radius":"50%",
            //不能参与动画
            //"background-color" : "red"    //css3的过渡动画可以完成
            //"background-position":"0 0"
        },400);
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div.demo{
            width: 100px;
            height: 100px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 1px solid gold;
            position: relative;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="demo" id="demo"></div>>
<script>
    // var demo = document.getElementById("demo");
    // var now = 100;
    // var timer = setInterval(function(){
    //  now += 10;
    //  if(now >= 400){
    //      now = 400;
    //      clearInterval(timer);
    //  }
    //  demo.style.width = now + "px";
    // },50);

    //jQuery的运动函数方法
    $(".demo").animate({
        "width":200,
        "height":200,
        "opacity":0.5,
        "border-width":20,
        "left":200,
        "top":200,
        "padding":50,
        "border-radius":"50%",
        // 不能参与动画
        // "background-color" : "red"    //css3的过渡动画可以完成
        // "background-position":"0 0"
    },400);
</script>
</body>
</html>

1、 动画排序

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        div.demo2{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="demo1">
    <p></p>
</div>
<div class="demo2" id="demo">
    <p></p>
</div>
<script>
    // 不同元素之间都有动画,不会排队。
    // 原理:animate函数封装时,用的是setInterval异步语句。同一个元素的动画有一个函数节流操作。
    // animate就是一个异步语句,异步语句在执行的时候,不会影响后面语句的执行。
    var during = 500;
    // 如果同一个元素,身上加了多个运动函数,会进行排队,谁先写的,谁先动。
    $(".demo1").animate({"left":600},during);
    $(".demo1").animate({"top":400},during);
    $(".demo1").animate({"left":0},during);
    $(".demo1").animate({"top":0},during);
    $(".demo2").animate({"left":600,"top":400},during);
    // 给一个元素添加事件中有运动函数,多次触发事件也会造成动画排队。直到最后一个事件动画结束。
    // $(".demo").mouseenter(function(){
    //  $(this).children("p").slideDown(during);
    // });
    // $(".demo").mouseleave(function(){
    //  $(this).children("p").slideUp(during);
    // });
</script>
</body>
</html>

2、 异步语句和回调函数

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        div.demo2{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }}
    </style>
</head>
<body>
<div class="demo1">
    <p></p>
</div>
<div class="demo2" id="demo">
    <p></p>
</div>
<script>
    var during = 500;
    $(".demo1").animate({"left":600},during);
    $(".demo1").animate({"top":400},during);
    $(".demo1").animate({"left":0},during);
    // 其他的运动方法也有回调函数:
    // slideDown()、slideUp()、fadeIn()、fadeOut()、show(1000)、hide(1000)这几个方法也是运动的方法,都有一个回调函数。
    $(".demo1").animate({"top":0},during,function(){
        $(".demo1 p").slideDown(500,function(){
            alert("出现啦");
        });
    });
    // animate运动方法就是一个异步语句,我们也可以给它一个回调函数,告诉我们运动结束之后我可以做什么事。
   //  animate方法有一个回调函数的参数,第三个参数可以传递一个回调函数。

    $(".demo2").animate({"left":600,"top":400},during,function(){
        $(".demo2 p").css("display","block");
    });
    // $(".demo").mouseenter(function(){
    //  $(this).children("p").slideDown(during);
    // });
    // $(".demo").mouseleave(function(){
    //  $(this).children("p").slideUp(during);
    // });
</script>
</body>
</html>

3、 delay()延迟动画

所有的动画语句都可以在前面有一个延迟语句。表示这条语句执行之后,动画不是立即执行,要等待一段时间再执行。

书写位置:在动画语句之前。

参数:规定的是延迟时间。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        div.demo2{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="demo1">
    <p></p>
</div>
<div class="demo2" id="demo">
    <p></p>
</div>
<script>
    var during = 500;

    $(".demo2").delay(1000).animate({"left":600,"top":400},during,function(){
        $(".demo2 p").delay(1000).slideDown(1000).delay(1000).slideUp(1000);
    });
</script>
</body>
</html>

只要是动画方法都可以写delay延迟。

slideDown()、slideUp()、fadeIn()、fadeOut()、show(1000)、hide(1000)都可以进行延迟。

$(".demo2 p").delay(1000).slideDown(1000);
$(".demo2 p").delay(1000).slideUp(1000);

要想延迟一个运动,前面必须每次都加delay。

写法等价于:

$(".demo2 p").delay(1000).slideDown(1000).delay(1000).slideUp(1000);

4、 stop()停止动画

可以停止我们的动画。

两个参数:都是布尔值。

第一个参数:表示是否清空排队的动画。true表示清空,false表示不清。

第二个参数:表示是否立即完成当前动画。true表示立即完成,false表示立即停止不动。

默认不写:两个参数都是false。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 0;
            top: 30px;
            overflow: hidden;
        }
        div.demo2{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<input type="button" value="默认:false、false" id="ff" />
<input type="button" value="true、false" id="tf" />
<input type="button" value="true、true" id="tt" />
<input type="button" value="false、true" id="ft" />
<div class="demo1">
    <p></p>
</div>
<!-- <div class="demo2" id="demo">
    <p></p>
</div> -->
<script>
    var during = 2000;
    $(".demo1").animate({"left":1000},during);
    $(".demo1").animate({"top":500},during);
    $(".demo1").animate({"left":0},during);
    $(".demo1").animate({"top":30},during,function(){
        $(".demo1 p").slideDown(500);
    });
    //如果参数都是false,不清空动画队列,立即停止当前动画,进入下一个排队的动画
    $("#ff").click(function(){
        $(".demo1").stop();
    });
    //第一个是true,第二个是false,清空后面的动画,立即停止当前动画
    $("#tf").click(function(){
        $(".demo1").stop(true);
    });
    //第一个是true,第二个是true,清空后面的动画,立即走完当前动画
    $("#tt").click(function(){
        $(".demo1").stop(true,true);
    });
    //第一个是false,第二个是true,不清空后面的动画,立即走完当前动画,并且进入下一个排队的动画
    $("#ft").click(function(){
        $(".demo1").stop(false,true);
    });
</script>
</body>
</html>

5、 解决动画排队问题

我希望新的动画被触发时,希望前面的这个元素动画全部清空,立即停止。

防止用户频繁触发事件,动画等待。

方法1:

用stop()。清空前面所有动画队列,立即停止当前。参数值需要传第一个true。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 100px;
            top: 100px;
            overflow: hidden;
        }
        div.demo{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="demo">
    <p></p>
</div>
<script>
    // 为了防止频繁流氓操作,只要添加一个运动动画,前面都必须加一个stop(true)。
    var during = 500;
    $(".demo").mouseenter(function(){
        $(this).children("p").stop(true).slideDown(during);
    });
    $(".demo").mouseleave(function(){
        $(this).children("p").stop(true).slideUp(during);
    });
</script>
</body>
</html>

方法2:

节流方法:判断元素是否在运动过程中,如果是,就不执行后面的其他操作,如果不是,就执行后面的动画。

元素都有一个方法叫做is(),判断是否处于某种状态。

语法

$(“p”).is(“:animated”);   返回true和false。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: url(images/0.jpg) no-repeat 50% 50% green;
            border: 5px solid gold;
            position: absolute;
            left: 100px;
            top: 100px;
            overflow: hidden;
        }
        div.demo{
            border-radius: 50%;
        }
        div p{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="demo">
    <p></p>
</div>
<script>
    var during = 500;
    $(".demo").mouseenter(function(){
        if($(this).children("p").is(":animated")){
            return;
        }
        $(this).children("p").slideDown(during);
    });
    $(".demo").mouseleave(function(){
        if($(this).children("p").is(":animated")){
            return;
        }
        $(this).children("p").slideUp(during);
    });
</script>
</body>
</html>

几个例子

  1. 突出显示
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #000;
        }
        .box{
            width: 660px;
            padding-left: 20px;
            padding-top: 20px;
            overflow: hidden;
            margin: 100px auto;
            border: 1px solid #fff;
        }
        .box ul{
            list-style: none;
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 200px;
            height: 186px;
            margin-right: 20px;
            margin-bottom: 20px;
        }
        .box ul li img{
            display: block;
            width: 200px;
            height: 186px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="images/01.jpg" alt="" /></li>
        <li><img src="images/02.jpg" alt="" /></li>
        <li><img src="images/03.jpg" alt="" /></li>
        <li><img src="images/04.jpg" alt="" /></li>
        <li><img src="images/05.jpg" alt="" /></li>
        <li><img src="images/06.jpg" alt="" /></li>
    </ul>
</div>
<script>
    var during = 500;
    //鼠标进入li的事件,每一个都添加
    $(".box ul li").each(function(){
        $(this).mouseenter(function(){
            $(this).stop(true).fadeTo(during,1).siblings().stop(true).fadeTo(during,0.4);
        }).click(function(){
            $(this).stop(true,true).children().slideUp(300).slideDown(300);
        });
    });
    //鼠标离开大盒子,所有的li恢复透明度
    $(".box").mouseleave(function() {
        $(".box ul li").stop(true).fadeTo(during,1);
    });
</script>
</body>
</html>
  1. 手风琴效果
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        <style>
        *{
            padding: 0;
            margin: 0;
        }
        .accordion{
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .accordion ul{
            list-style: none;
            width: 2000px;
            overflow: hidden;
        }
        .accordion ul li{
            float: left;
            width: 160px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .accordion ul li.last{
            width: 560px;
        }
        .accordion ul li img{
            display: block;
            width: 560px;
            height: 300px;
        }
        .accordion ul li span{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
        }
    </style>
</head>
<body>
<div class="accordion" id="accordion">
    <ul>
        <li><span class="mask"></span><img src="images/0.jpg" alt="" /></li>
        <li><span class="mask"></span><img src="images/1.jpg" alt="" /></li>
        <li><span class="mask"></span><img src="images/2.jpg" alt="" /></li>
        <li><span class="mask"></span><img src="images/3.jpg" alt="" /></li>
        <li class="last"><span class="mask"></span><img src="images/4.jpg" alt="" /></li>
    </ul>
</div>
<script>
    //鼠标进入每一个li,做相应操作,li本身变宽560,其他li变成60,当前li里的mask淡出,其他的淡入
    var during = 500;
    $("#accordion ul li").each(function(){
        $(this).mouseenter(function(){
            $(this).stop(true).animate({"width":560},during).siblings().stop(true).animate({"width":60},during);
            //自己的mask淡出,其他的mask淡入
            $(this).children('span').stop(true).fadeOut(during);
            $(this).siblings().children('span').stop(true).fadeIn(during);
        })
    });
    //鼠标移出大盒子的事件
    $("#accordion").mouseleave(function(){
        //恢复到默认的样式
        $(this).find("li").stop(true).animate({"width":160},during);
        $(this).find("span").stop(true).fadeIn(during);
    })
</script>
</body>
</html>
  1. 淡入淡出的轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 900px;
            height: 540px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
            cursor: pointer;
        }
        .box ul{
            list-style: none;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .box ul li{
            position: absolute;
            width: 900px;
            height: 540px;
            left: 0 ;
            top: 0;
            display: none;
        }
        .box ul li.first{
            display: block;
        }
        .box ul li img{
            display: block;
        }
        .box .btn span{
            position: absolute;
            top: 50%;
            width: 55px;
            height: 55px;
            margin-top: -27.5px;
            background: url(images/aoyun/slide-btnL.png) no-repeat;
        }
        .box .btn span.leftbtn{
            left: 20px;
        }
        .box .btn span.rightbtn{
            right: 20px;
            background-image: url(images/aoyun/slide-btnR.png);
        }
        .box ol{
            position: absolute;
            bottom: 30px;
            left: 50%;
            width: 210px;
            padding-left: 10px;
            margin-left: -110px;
            list-style: none;
        }
        .box ol li{
            float: left;
            width: 20px;
            height: 20px;
            background: #666;
            margin-right: 10px;
            border-radius: 50%;
        }
        .box ol li.current{
            background: #f00;
        }
    </style>
</head>
<body>
    <!-- 布局很重要 -->
    <div class="box">
        <ul id="mUl">
            <li class="first"><img src="images/aoyun/0.jpg" alt="" /></li>
            <li><img src="images/aoyun/1.jpg" alt="" /></li>
            <li><img src="images/aoyun/2.jpg" alt="" /></li>
            <li><img src="images/aoyun/3.jpg" alt="" /></li>
            <li><img src="images/aoyun/4.jpg" alt="" /></li>
            <li><img src="images/aoyun/5.jpg" alt="" /></li>
            <li><img src="images/aoyun/6.jpg" alt="" /></li>
        </ul>
        <div class="btn">
            <span class="leftbtn" id="leftbtn"></span>
            <span class="rightbtn" id="rightbtn" ></span>
        </div>
        <ol id="xiabiao">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script>
        //添加右按钮的事件,点击让当前图片淡出,下一张图片淡入
        var during = 500;
        var idx = 0;
        $("#rightbtn").click(rightHandle);
        //左按钮点击事件
        $("#leftbtn").click(function(){
            //节流
            if($("#mUl li").eq(idx).is(":animated")) return;
            // 当前的图片淡出,下一张图片淡入
            $("#mUl li").eq(idx).stop(true).fadeOut(during);
            //之后再递加
            idx--;
            //判断是否是最后一张了
            if(idx < 0){
                idx = $("#mUl li").length - 1;
            }
            $("#mUl li").eq(idx).stop(true).fadeIn(during);
            //改小圆点的状态
            $("#xiabiao li").eq(idx).addClass('current').siblings().removeClass('current');
        });

        // 小圆点的点击事件,每一个都点击
        $("#xiabiao li").each(function(i){
            $(this).click(function(){
                //节流
                if($("#mUl li").eq(idx).is(":animated")) return;
                // 当前的图片淡出
                $("#mUl li").eq(idx).stop(true).fadeOut(during);
                //点击的小圆点对应的那个图片淡入
                idx = i;
                $("#mUl li").eq(idx).stop(true).fadeIn(during);
                $(this).addClass('current').siblings().removeClass('current');
            })
        });

        // 自己主动运动的过程    
        var timer = setInterval(rightHandle,2000);
        $(".box").mouseenter(function(){
            clearInterval(timer);
        }).mouseleave(function(){
            timer = setInterval(rightHandle,2000);
        });
        //右按钮的运动函数
        function rightHandle(){
            //节流
            if($("#mUl li").eq(idx).is(":animated")) return;
            // 当前的图片淡出,下一张图片淡入
            $("#mUl li").eq(idx).stop(true).fadeOut(during);
            //之后再递加
            idx++;
            //判断是否是最后一张了
            if(idx == $("#mUl li").length){
                idx = 0;
            }
            $("#mUl li").eq(idx).stop(true).fadeIn(during);
            //改小圆点的状态
            $("#xiabiao li").eq(idx).addClass('current').siblings().removeClass('current');
        }
    </script>
</body>
</html>
  1. 淡入淡出的轮播图-闪动拓展
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 900px;
            height: 540px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
            cursor: pointer;
        }
        .box ul{
            list-style: none;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .box ul li{
            position: absolute;
            width: 900px;
            height: 540px;
            left: 0 ;
            top: 0;
            display: none;
        }
        .box ul li.first{
            display: block;
        }
        .box ul li img{
            display: block;
        }
        .box .btn span{
            position: absolute;
            top: 50%;
            width: 55px;
            height: 55px;
            margin-top: -27.5px;
            background: url(images/aoyun/slide-btnL.png) no-repeat;
        }
        .box .btn span.leftbtn{
            left: 20px;
        }
        .box .btn span.rightbtn{
            right: 20px;
            background-image: url(images/aoyun/slide-btnR.png);
        }
        .box ol{
            position: absolute;
            bottom: 30px;
            left: 50%;
            width: 210px;
            padding-left: 10px;
            margin-left: -110px;
            list-style: none;
        }
        .box ol li{
            float: left;
            width: 20px;
            height: 20px;
            background: #666;
            margin-right: 10px;
            border-radius: 50%;
        }
        .box ol li.current{
            background: #f00;
        }
    </style>
</head>
<body>
    <!-- 布局很重要 -->
    <div class="box">
        <ul id="mUl">
            <li class="first"><img src="images/aoyun/0.jpg" alt="" /></li>
            <li><img src="images/aoyun/1.jpg" alt="" /></li>
            <li><img src="images/aoyun/2.jpg" alt="" /></li>
            <li><img src="images/aoyun/3.jpg" alt="" /></li>
            <li><img src="images/aoyun/4.jpg" alt="" /></li>
            <li><img src="images/aoyun/5.jpg" alt="" /></li>
            <li><img src="images/aoyun/6.jpg" alt="" /></li>
        </ul>
        <div class="btn">
            <span class="leftbtn" id="leftbtn"></span>
            <span class="rightbtn" id="rightbtn" ></span>
        </div>
        <ol id="xiabiao">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script>
        //添加右按钮的事件,点击让当前图片淡出,下一张图片淡入
        var during = 500;
        var idx = 0;
        $("#rightbtn").click(rightHandle);
        //左按钮点击事件
        $("#leftbtn").click(function(){
            //节流
            if($("#mUl li").eq(idx).is(":animated")) return;
            // 当前的图片淡出,下一张图片淡入
            $("#mUl li").eq(idx).stop(true).fadeOut(during);
            //之后再递加
            idx--;
            //判断是否是最后一张了
            if(idx < 0){
                idx = $("#mUl li").length - 1;
            }
            $("#mUl li").eq(idx).stop(true).fadeIn(during);
            //改小圆点的状态
            $("#xiabiao li").eq(idx).addClass('current').siblings().removeClass('current');
        });

        // 小圆点的点击事件,每一个都点击
        $("#xiabiao li").each(function(i){
            $(this).click(function(){
                //节流
                if($("#mUl li").eq(idx).is(":animated")) return;
                // 当前的图片淡出
                $("#mUl li").eq(idx).stop(true).fadeOut(during);
                //点击的小圆点对应的那个图片淡入
                idx = i;
                $("#mUl li").eq(idx).stop(true).fadeIn(during);
                $(this).addClass('current').siblings().removeClass('current');
            })
        });

        // 自己主动运动的过程    
        var timer = setInterval(rightHandle,2000);
        $(".box").mouseenter(function(){
            clearInterval(timer);
        }).mouseleave(function(){
            timer = setInterval(rightHandle,2000);
        });
        //右按钮的运动函数
        function rightHandle(){
            //节流
            if($("#mUl li").eq(idx).is(":animated")) return;
            // 当前的图片淡出,下一张图片淡入
            $("#mUl li").eq(idx).stop(true).fadeOut(during);
            //之后再递加
            idx++;
            //判断是否是最后一张了
            if(idx == $("#mUl li").length){
                idx = 0;
            }
            $("#mUl li").eq(idx).stop(true).fadeIn(during);
            //改小圆点的状态
            $("#xiabiao li").eq(idx).addClass('current').siblings().removeClass('current');
        }
    </script>
</body>
</html>
» 转载请注明来源:若我若鱼 » js 系列(7) jquery (2)

Leave a Reply

Your email address will not be published. Required fields are marked *

10 − nine =