当前位置：首页 > news >正文

jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）

news 2026/4/11 16:17:44

菜单功能

淡入淡出轮播图(上)

淡入淡出轮播图(下)

折叠面板

菜单功能

<!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="./js/jquery-3.6.0.min.js"></script><style>* {margin: 0;padding: 0;}.menu {list-style: none;width: 500px;height: 50px;background: skyblue;margin: 100px auto;}.menu>li {float: left;width: 99px;height: 50px;line-height: 50px;font-size: 20px;border-right: 1px solid white;text-align: center;}.menu>li:nth-child(5){border-right: 0;}.dropdown {list-style: none;display: none;width: 99px;}.dropdown li {width: 99px;height: 30px;line-height: 30px;background: orange;}</style>
</head>
<body><ul class="menu"><li>菜单1<ul class="dropdown"><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li></ul></li><li>菜单2<ul class="dropdown"><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li></ul></li><li>菜单3</li><li>菜单4</li><li>菜单5</li></ul><script>$('.menu li').mouseenter(function (){$(this).children('.dropdown').slideDown();});$('.menu li').mouseleave(function (){$(this).children('.dropdown').slideUp();});</script>
</body>
</html>

淡入淡出轮播图(上)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 560px;height: 300px;border: 5px solid gray;margin: 100px auto;position: relative;overflow: hidden;}.m_unit{width: 10000px;height: 300px;position: absolute;top: 0;left: 0;}.m_unit ul{overflow: hidden;}.m_unit ul li{list-style: none;position: absolute;top: 0px;left: 0px;width: 560px;height: 300px;display: none;}.m_unit ul li.current{display: block;}/*左右按钮*/.btn span{width: 55px;height: 55px;background:
url('images/btnL.png');position: absolute;border-radius:  10px;top: 50%;margin-top: -28px;}.btn span.right{background: url('images/btnR.png');right: 0;}/*小圆点*/.circle ul li{list-style: none;float: left;width: 20px;height: 20px;background: orange;margin-right: 10px;border-radius: 50%;}.circle ul{overflow: hidden;}.circle{position: absolute;bottom: 10px;right: 10px;}.circle ul li.current{background: red;}</style>
</head>
<body><div class="box" id='box'><div class="m_unit" id='m_unit'><ul><li class='current'><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"><span class='left' id='leftBtn'></span><span class='right' id='rightBtn'></span></div><div class="circle" id='circle'><ul><li class='current'></li><li></li><li></li><li></li><li></li></ul></div></div></body>
</html>

淡入淡出轮播图(下)

// 显示哪张图片的索引
var idx = 0;
var $lis = $('#m_unit ul li');
var imgLength = $lis.length;
// 定时器
var timer = setInterval(rightHandler, 2000);
// 鼠标滑动到元素上移除定时器不在自动轮播
$('#box').mouseenter(function () {clearInterval(timer);
});
// 鼠标离开元素,开启自动轮播
$('#box').mouseleave(function () {timer = setInterval(rightHandler, 2000);
});
// 点击右按钮,元素增加
$('#rightBtn').click(rightHandler);
function rightHandler() {$lis.eq(idx).fadeOut(1000);idx++;if (idx > imgLength - 1){idx = 0};$lis.eq(idx).fadeIn(1000);changecircle();
}
// 点击左按钮,元素减少
$('#leftBtn').click(function () {$lis.eq(idx).fadeOut(1000);idx--;if (idx < 0) {idx = imgLength - 1};$lis.eq(idx).fadeIn(1000);changecircle();
});
// 点击指示器,进行切换元素
$('#circle ul li').each(function () {$(this).click(function () {// index():获取当前元素的索引值var circleidx = $(this).index();if (circleidx == idx) {return};$lis.eq(idx).fadeOut(1000);idx = circleidx;$lis.eq(idx).fadeIn(1000);changecircle();});
});
// 切换指示器样式
function changecircle() {$('#circle ul li').eq(idx).css('background','red').siblings().css('background', 'orange');
}

折叠面板

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>折叠面板</title><script src="./js/jquery-3.6.0.min.js"></script><style>* {margin: 0;padding: 0}.container {width: 600px;margin: 80px auto;}.container ul {list-style: none}.container ul li h3 {border-bottom: 1px solid black;background-color: skyblue;position: relative}.container ul li h3 span {position: absolute;right: 5px}.container ul li .cont {display: none}</style>
</head>
<body><div class="container"><ul><li><h3>Section1<span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Praesent nisl lorem,dictum id pellentesque at, vestibulum ut
arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor
aliquam vitae.Curabitur molestie eros.</div></li><li><h3>Section2 <span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent nisl lorem, dictum id pellentesque at, vestibulum ut
arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.Curabitur molestie eros.</div></li><li><h3>Section3 <span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.Curabitur molestie eros.</div></li></ul></div><script>$('h3').click(function () {if ($(this).siblings().is(':visible')) {//如果是可见的，就把内容收起来$(this).siblings().slideUp();//变更符号$(this).find('span').html('>');} else {//在展开当前标题的内容之前，先把其他内容收起来$(this).parent().siblings().find('.cont').slideUp();//如果是不可见的，把内容div显示$(this).siblings().slideDown();// 变更其他元素符号$(this).parent().siblings().find('span').html('>');//变更符号$(this).find('span').html('v');}})</script>
</body>
</html>

jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）

目录菜单功能淡入淡出轮播图(上) 淡入淡出轮播图(下) 折叠面板菜单功能 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…...

编程日记 2023/11/27 4:11:46

攻防非对称问题｜当前企业面临的网络攻防非对称问题及其解决途径

随着信息技术的不断发展，网络已经成为我们日常生活和商业活动中不可或缺的一部分。然而，随之而来的是网络安全问题的不断升级。网络攻防非对称问题是当前亟待解决的一个复杂而严峻的挑战。其主要的表现是攻击成本远低于防御成本以及相同投入带来的攻击能…...

编程日记 2023/11/27 4:10:44

Java多线程二-线程安全

1、线程安全问题多个线程，同时操作同一个共享资源的时候，可能会出现业务安全问题。 2、实例：取钱的线程安全问题 2.1、场景小明和小红是夫妻，他们有个共同账户，余额是十万元，如果两人同时取钱并且各自取…...

编程日记 2023/11/27 4:08:42

Rust个人学习之结构体

第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到：结构体是一种自定义数据类型，它允许命名多个相关的…...

编程日记 2023/11/27 4:07:40

kafka详细讲解与安装

Kafka是一种分布式流处理平台，具有高吞吐量、可扩展性和容错性。它最初由LinkedIn开发，现已成为Apache软件基金会的顶级项目。Kafka广泛应用于实时数据流处理、日志收集、消息队列等场景。以下是关于Kafka的简要讲解和安装步骤： 一、Kafka…...

编程日记 2023/11/27 4:06:39

在我国干独立游戏开发有多难？

游戏独立开发在中国，一直以来都是一条充满挑战的道路。尽管有着无限的激情和创意，但面对市场、资金、政策等多方面的困难，许多独立开发者在这条路上艰难前行。首先，市场竞争激烈是中国游戏独立开发者面临的首要挑战。随着游戏产…...

编程日记 2023/11/27 4:05:38

不可错过的网上宝藏：2023年必看的顶级资源大盘点！

亲爱的“AI uTools”读者们，大家好！ 在这个信息爆炸的时代，互联网上充满了无数的资源，但如何从这海量信息中挑选出真正有用的宝藏呢？今天，我为大家精心挑选了一系列优质网站资源，涵盖了从文本处…...

编程日记 2023/11/27 4:04:37

日本服务器访问速度和带宽有没有直接关系？

　　对于许多网站和应用程序来说，服务器的访问速度是至关重要的。用户希望能够快速加载页面、上传和下载文件，而这些都与服务器的带宽有关。那么，日本服务器的访问速度和带宽之间是否存在直接关系呢? 我们需要了解什么是带宽。带宽是指网络…...

编程日记 2023/11/27 4:03:36

[vxe-table] vxe-table-column配合v-if导致列样式与位置错乱

<vxe-table-column v-if"pageInfo.id 4 ||pageInfo.id 8" title"上报类型" width"100" key1><template v-slot"{row}"><span>咨询工具</span></template> </vxe-table-column>//或者<vxe-ta…...

编程日记 2023/11/27 4:02:35

C# 忽略大小写

在 C# 中，你可以通过以下几种方式来忽略大小写： 使用 ToLower 或 ToUpper 方法将字符串转换为全小写或全大写，然后进行比较。使用 Compare 或 CompareOrdinal 方法，并传入正确的 StringComparer 实例以指示比较应该忽略大小写。使…...

编程日记 2023/11/27 4:01:34

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训在当今数字化时代，大数据技术的迅猛发展带来了前所未有的数据增长，同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全&#xff…...

编程日记 2023/11/27 4:00:34

[datastore@cyberfear.com].Elbie、[thekeyishere@cock.li].Elbie勒索病毒数据怎么处理|数据解密恢复

引言： 随着科技的进步，勒索病毒变得越来越复杂，而[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒是其中的一种令人头疼的威胁。本文将深入介绍[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒…...

编程日记 2023/11/27 3:58:31

【咕咕送书 | 第六期】深入浅出阐述嵌入式虚拟机原理，实现“小而能”嵌入式虚拟机！

🎬 鸽芷咕：个人主页 🔥 个人专栏:《粉丝福利》《linux深造日志》 ⛺️生活的理想，就是为了理想的生活! 文章目录 ⛳️ 写在前面参与规则引言一、为什么嵌入式系统需要虚拟化技术？1.1 专家推荐二、本书适合谁&#x…...

编程日记 2023/11/27 3:57:30

论文阅读——DDeP（cvpr2023）

分割标签耗时且贵，所以常常使用预训练提高分割模型标签有效性，反正就是，需要一个预训练分割模型。典型的分割模型encoder部分通过分类任务预训练，decoder部分参数随机初始化。作者认为这个方法次优，尤其标签比较少的情…...

编程日记 2023/11/27 3:56:29

Docker | Docker常用命令

Docker | Docker常用命令 ✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏：Docker系列 ✨…...

编程日记 2023/11/27 3:55:28

精进：简单聊聊华为战略与DSTE

首发：麦子禾作者：石头在以前专题文中，石头聊华为市场管理MM、基于价值驱动的业务设计VDBD、轻量级战略流程五看三定、业务领先模型BLM、业务执行力模型BEM比较多，印象中石头没有具体谈过DSTE（从战略规划到执行&…...

编程日记 2023/11/27 3:54:27

强制删除文件

DEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 强制删除文件,新建一个文本文件,将以上代码复制到文档中,保存,将文档重命名为delete.bat 如果弹窗提示修改后缀名可能导致文件不可用,也点击确认修改文件名称. 将需要强制删除的文件拖拽到这个delete.bat文件上,显示使用delete.bat打…...

编程日记 2023/11/27 3:53:26

Vue+ElementUI+C#技巧分享：周数选择器

文章目录前言一、周数的计算逻辑1.1 周数的定义1.2 年初周数的确定1.3 周数的计算方法二、VueElementUI代码实现2.1 计算周数2.2 获取周的日期范围2.3 根据周数获取日期范围2.4 控件引用2.4.1 控件引用代码分析2.4.2 初始化变量代码分析 2.5 周数选择器完整代码三、C#后端代…...

编程日记 2023/11/27 3:52:25

【算法】FFT-1（递归实现）（不包括IFFT）

FFT 多项式多项式乘法复数及运算导数泰勒公式及展开式欧拉公式单位根 FFTCode IFFT 多项式我们从课本中可以知道，一个 n − 1 n-1 n−1 次的多项式可以写成 a 0 a 1 x a 2 x 2 a 3 x 3 ⋯ a n − 1 x n − 1 a_{0}a_{1}xa_{2}x^2a_{3}x^3\dotsa_{n-1}x^{n-…...

编程日记 2023/11/27 3:51:24

大模型训练效率提升至2.6倍，腾讯Angel机器学习框架升级

在算力紧缺的背景下，如何提升大模型训练和推理的效率，并降低成本，成为业界关注的焦点。 11月23日，腾讯披露，腾讯混元大模型背后的自研机器学习框架Angel再次升级，大模型训练效率提升至主流开源框架的2.6倍…...

编程日记 2023/11/27 3:50:22

如何实战卫星轨道计算：SGP4算法库深度优化指南

如何实战卫星轨道计算：SGP4算法库深度优化指南【免费下载链接】sgp4 Simplified perturbations models 项目地址: https://gitcode.com/gh_mirrors/sg/sgp4 卫星轨道计算是航天工程、卫星通信和天文观测的核心技术，而SGP4算法库作为实现简化轨道…...

编程新知 2026/4/11 15:53:58

Python 批量导出数据库数据至 Excel 文件叫

简介 langchain专门用于构建LLM大语言模型，其中提供了大量的prompt模板，和组件，通过chain(链)的方式将流程连接起来，操作简单，开发便捷。环境配置安装langchain框架 pip install langchain langchain-community 其中…...

编程新知 2026/4/11 15:43:45

清算波普尔：终结107年学术诈骗的真理清场行动

清算波普尔：终结107年学术诈骗的真理清场行动摘要波普尔通过“名词动量化”将“科学（真理结果）”偷换为“科学探索（试错过程）”，制造了长达107年的学术诈骗。他以“过程即科学”为幌子，用无限试…...

编程新知 2026/4/11 15:35:43

RePKG终极指南：轻松处理Wallpaper Engine资源文件

RePKG终极指南：轻松处理Wallpaper Engine资源文件【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg RePKG是一款专为Wallpaper Engine用户设计的高效资源处理工具&#xf…...

编程新知 2026/4/11 15:11:24

用C++打造经典小游戏：从猜拳到扫雷的实战指南

1. 为什么选择C开发经典小游戏？ 很多初学者问我，为什么推荐用C来开发小游戏而不是Python或者JavaScript？这个问题我十年前刚开始学编程时也思考过。经过多年实战，我发现C有几个不可替代的优势：首先是性能，C…...

编程新知 2026/4/11 15:06:41

精准测试：AI代码变更分析如何缩短回归测试周期

👋 大家好，欢迎来到我的技术博客！ 📚 在这里，我会分享学习笔记、实战经验与技术思考，力求用简单的方式讲清楚复杂的问题。 🎯 本文将围绕人工智能这个话题展开，希望能为你带来一些启…...

编程新知 2026/4/11 14:36:00

如何在Linux系统上免费体验专业图像编辑：Photoshop CC 2022完整安装指南

如何在Linux系统上免费体验专业图像编辑：Photoshop CC 2022完整安装指南【免费下载链接】Photoshop-CC2022-Linux Installer from Photoshop CC 2021 to 2022 on linux with a GUI 项目地址: https://gitcode.com/gh_mirrors/ph/Photoshop-CC2022-Linux 对于…...

编程新知 2026/4/11 12:50:19

从OBD到UDS：一文搞懂ISO14229 0x19服务中排放与非排放DTC的查询差异与实战

从OBD到UDS：深度解析ISO14229 0x19服务中排放与非排放DTC的差异化处理在汽车电子控制单元（ECU）的开发与测试中，诊断故障码（DTC）的管理一直是工程师面临的核心挑战之一。特别是随着全球排放法规的日益严格&…...

编程新知 2026/4/11 12:01:47

Qwen3-ASR-0.6B方言对比：东北话与四川话识别效果

Qwen3-ASR-0.6B方言对比：东北话与四川话识别效果 1. 引言方言识别一直是语音识别领域的难点和热点。中国地域辽阔，方言种类繁多，其中东北话和四川话作为使用人口众多的两大方言体系，在语音特点上有着显著差异。东北话以儿化音丰…...

编程新知 2026/4/11 11:43:17

三步彻底告别Windows和Office激活烦恼：KMS_VL_ALL_AIO实战全解析

三步彻底告别Windows和Office激活烦恼：KMS_VL_ALL_AIO实战全解析【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 周五下午4点，IT部门的小王接到第7个求助电话——市场部同…...

编程新知 2026/4/11 10:25:17

菜单功能

淡入淡出轮播图(上)

淡入淡出轮播图(下)

折叠面板

相关文章：