一、使用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.点击指示器可以实现图片切换
轮播图.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/轮播图.css"> <script src="./js/jquery-1.12.4.min.js"></script> </head> <body> <div class="box" id="box"> <!-- 图片 --> <div class="root" id="root"> <ul> <li class="select"><a href="#"><img src="./images/0.jpg" alt=""></a></li> <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> <li><a href="#"><img src="./images/2.jpg" alt=""></a></li> <li><a href="#"><img src="./images/3.jpg" alt=""></a></li> <li><a href="#"><img src="./images/4.jpg" alt=""></a></li> </ul> </div> <!-- 左后切换按钮 --> <div class="btn" id="btn"> <span class="leftbtn" id="leftbtn"></span> <span class="rightbtn" id="rightbtn"></span> </div> <!-- 导航 --> <div class="circle" id="circle"> <ul> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="./js/轮播图.js"></script> </body> </html>轮播图.css
*{ margin: 0; padding: 0; } .box{ width: 560px; height: 300px; border: 5px solid gray; margin: 100px auto; position: relative; } .root{ width: 560px; height: 300px; } .root ul li{ list-style-type: none; width: 560px; height: 300px; position: absolute; top: 0; left: 0; display: none; } .root ul li.select{ display: block; } .btn span{ display: block; width: 55px; height: 55px; position: absolute; top: 50%; margin-top: -27.5px; } .btn .leftbtn{ background-image: url("../images/btnL.png"); left: 0; } .btn .rightbtn{ background-image: url("../images/btnR.png"); right: 0; } .circle{ position: absolute; bottom: 8px; right: 5px; } .circle ul li{ float: left; list-style: none; width: 20px; height: 20px; background-color: #fff; margin-right: 10px; border-radius: 50%; } .circle ul li.select{ background-color: red; }轮播图.js
// 显示图片的索引 var idx = 0; // 遍历每一张图片 var lis = $("#root ul li") // 定时器,让轮播图自己动起来，时间间隔3s var timer = setInterval(leftRun,3000) // 鼠标划到上面停止切换 $("#box").mouseenter(function(){ clearInterval(timer) }) // 鼠标离开继续切换 $("#box").mouseleave(function(){ timer = setInterval(leftRun,3000) }) // 切换图片 $("#leftbtn").click(leftRun) function leftRun(){ lis.eq(idx).fadeOut(100); idx += 1; // 边界处理 if(idx > lis.length -1 ){ idx = 0; } lis.eq(idx).fadeIn(100); changeCircle(); } $("#rightbtn").click(rightRun) function rightRun(){ lis.eq(idx).fadeOut(100); idx -= 1; // 边界处理 if(idx < 0){ idx = lis.length -1; } lis.eq(idx).fadeIn(100); changeCircle(); } // 指示器的处理 function changeCircle (){ // 找到当前显示的图片idx,让指示器高亮，然后把他同级的所有高亮删除 $("#circle ul li").eq(idx).addClass("select").siblings().removeClass(); } // 点击指示器，切换图片 // 先遍历每一张li标签 $("#circle ul li").each(function(){ $(this).click(function(){ // index() 获取当前元素的索引值 var circleIdx = $(this).index() if(circleIdx == idx){ return } lis.eq(idx).fadeOut(100) idx = circleIdx; lis.eq(idx).fadeIn(100) changeCircle(); }) })上面文件的打包在下面链接获取：
链接：https://pan.baidu.com/s/1K0Bfv2n-zGT-nfTF5yAgxg
提取码：jv01
三、jQuery实现折叠面板
1.面板显示一个，其他的隐藏
2.显示箭头向下，隐藏箭头向右
折叠面板.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> <script src="./jquery-1.12.4.min.js"></script> <style> *{ margin: 0; padding: 0; } .container{ width: 600px; margin: 100px auto; } .container ul{ list-style-type: none; } .container ul li h3{ background-color: skyblue; border-left: 5px solid blue; padding: 5px; border-bottom: 1px solid black; position: relative; } .container ul li h3 span{ position: absolute; right: 10px; } .container ul li .content{ display: none; } </style> </head> <body> <div class="container"> <ul> <li> <h3>新闻<span>></span></h3> <div class="content"> 新华社北京1月30日电 航班高铁飞驰穿梭， 热门景点人头攒动，网红餐厅千人等号， 影院剧场座位爆满……红红火火的节日盛景向世界展现 了一个充满生机、蓬勃向上的中国。 全球第二大经济体持续释放发展潜能， 为低迷的世界经济注入动力、信心和确定性。 </div> </li> <li> <h3>财经<span>></span></h3> <div class="content"> 新华社北京1月30日电 航班高铁飞驰穿梭， 热门景点人头攒动，网红餐厅千人等号， 影院剧场座位爆满……红红火火的节日盛景向世界展现 了一个充满生机、蓬勃向上的中国。 全球第二大经济体持续释放发展潜能， 为低迷的世界经济注入动力、信心和确定性。 </div> </li> <li> <h3>国情<span>></span></h3> <div class="content"> 新华社北京1月30日电 航班高铁飞驰穿梭， 热门景点人头攒动，网红餐厅千人等号， 影院剧场座位爆满……红红火火的节日盛景向世界展现 了一个充满生机、蓬勃向上的中国。 全球第二大经济体持续释放发展潜能， 为低迷的世界经济注入动力、信心和确定性。 </div> </li> </ul> </div> <script> $(".container ul li h3").click(function(){ // .is(":visible") :判断一个元素是否显示，显示返回true，否则返回false if($(this).siblings().is(":visible")){ // 隐藏 $(this).siblings().slideUp(100) // 修改向右的箭头 $(this).find("span").html(">") }else{ // 显示 $(this).siblings().slideDown(100) // 隐藏其他内容 $(this).parent().siblings().find(".content").slideUp(100) // 内容显示就修改成向下的箭头 $(this).find("span").html("v") // 隐藏的内容的箭头改成向右的箭头 $(this).parent().siblings().find("span").html(">") } }) </script> </body> </html>
四、jQuery_回到顶部
1.回到顶部先隐藏，当垂直距离大于500px的时候显示
2.点击回到顶部，跳转到顶部，垂直距离为零
回到顶部.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> <script src="./jquery-1.12.4.min.js"></script> <style> p{ height: 500px; } #btn{ position: fixed; right: 20px; bottom: 20px; width: 55px; height: 55px; background-color: rgba(0,0,0,.4); color: #fff; text-decoration: none; padding: 5px; font-size: 20px; text-align: center; display: none; } </style> </head> <body> <p>首页</p> <p>新闻</p> <p>体育</p> <p>彩票</p> <p>国情</p> <p>健康</p> <p>论坛</p> <p>服务</p> <!-- href="JavaScript:void(0)" ：让a标签失去跳转属性 --> <a href="JavaScript:void(0)" id="btn">回到顶部</a> <script> // 自定义函数 $(function(){ $(window).scroll(function(){ // 如果垂直滚动的距离大于500，回到顶部显示，否则隐藏 if($(window).scrollTop() > 500){ $("#btn").fadeIn(300); }else{ $("#btn").fadeOut(300); } }) }) // 点击回到顶部 $("#btn").click(function(){ $("html").animate({ scrollTop:0, },300) }) </script> </body> </html>
五、Swiper轮播图
开源、免费、强大的触摸滑动插件
Swiper 使用方法
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"> </head> <body> ... <script src="dist/js/swiper-bundle.min.js"></script> ... </body> </html>2.添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div>3.你可能想要给Swiper定义一个大小，当然不要也行
.swiper { width: 600px; height: 300px; }4.初始化Swiper
<script> var mySwiper = new Swiper ('.swiper', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>
Swiper的引用：
可以仿照下面链接的方式：
链接：https://pan.baidu.com/s/1QiNROp08zh_QgAoYmBb4lw
提取码：l2dt<!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="./swiper-bundle.min.css"> <style> .swiper { width: 600px; height: 300px; } .swiper-slide img{ width: 100%; } </style> </head> <body> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./image/0.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./image/1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./image/2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./image/3.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./image/4.jpg" alt=""> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="./swiper-bundle.min.js"></script> <script> var mySwiper = new Swiper(".swiper", { loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </body> </html>
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
