一、使用jQuery实现下拉列表

menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/menu.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <ul class="menu">
        <li>
            新房
            <ul class="dropdown">
                <li>新盘</li>
                <li>楼讯</li>
                <li>热门活动</li>
                <li>房源</li>
                <li>商业地产</li>
                <li>品牌专区</li>
            </ul>
        </li>
        <li>
            二手房
            <ul class="dropdown">
                <li>房源</li>
                <li>小区</li>
                <li>地图找房</li>
                <li>房源经纪人</li>
                <li>违规经纪人</li>
                <li>我要卖房</li>
            </ul>
        </li>
        <li>
            租房
            <ul class="dropdown">
                <li>区域找房</li>
                <li>地图找房</li>
                <li>地铁找房</li>
                <li>小区</li>
                <li>名宿短租</li>
                <li>品牌公寓</li>
            </ul>
        </li>
        <li>
            商铺写字楼
            <ul class="dropdown">
                <li>商铺出租</li>
                <li>商铺出售</li>
                <li>商铺新盘</li>
                <li>写字楼出租</li>
                <li>写字楼出售</li>
                <li>写字楼新盘</li>
            </ul>
        </li>
        <li>海外地产</li>
        <li>装修</li>
        <li>楼讯</li>
        <li>房价</li>
        <li>问答</li>
    </ul>

    <script src="./js/menu.js"></script>
</body>
</html>

menu.css

*{
    margin: 0;
    padding: 0;
}

.menu{
    list-style-type: none;
    width: 900px;
    height: 50px;
    background-color: #f1f1f1;
    margin: 100px auto;
}
.menu>li{
    float: left;
    width: 98px;
    height: 50px;
    line-height: 50px;
    border-left: 2px solid #fff;
    text-align: center;
    font-size: 18px;
    /* cursor: pointer：鼠标悬停变成小手 */
    cursor: pointer;
}
.dropdown{
    list-style-type: none;
    background-color: #cccc;
    display: none;
}
.dropdown>li:hover{
    color: whitesmoke;
}

menu.js

// $(".menu > li").mouseenter(function(){
//     $(this).children().slideDown(100)
// })
// $(".menu > li").mouseleave(function(){
//     $(this).children().slideUp(10)
// })
// 两种方法都可行
$(".menu > li").hover(
    function(){
        $(this).children().slideDown(100)
    },
    function(){
        $(this).children().slideUp(10)
    }
)

二、jQuery实现轮播图

1.点击左右可以实现图片切换

2.鼠标进入停止切换（清除定时器），离开恢复切换（重启定时器）

3.点击指示器可以实现图片切换

轮播

jQuery的应用

一、使用jQuery实现下拉列表

menu.html

menu.css

menu.js

二、jQuery实现轮播图

猜你喜欢