一、使用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.点击指示器可以实现图片切换
轮播