jQuery综合案例：下拉菜单、手风琴轮播图、淡入淡出轮播图
- jQuery排序和动画综合案例：下拉菜单
<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>下拉菜单</title>
<style>
margin: 0;
padding: 0;
list-style: none;
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
.wrap li {
background-image: url(images/libg.jpg);
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
.wrap li ul {
position: absolute;
top: 30px;
display: none;
</style>
</head>
<div class="wrap">
<ul id="menu">
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<a href="javascript:void(0);">二级菜单11</a>
<a href="javascript:void(0);">二级菜单12</a>
<a href="javascript:void(0);">二级菜单13</a>
<a href="javascript:void(0);">一级菜单2</a>
<a href="javascript:void(0);">二级菜单21</a>
<a href="javascript:void(0);">二级菜单22</a>
<a href="javascript:void(0);">二级菜单23</a>
<a href="javascript:void(0);">一级菜单3</a>
<a href="javascript:void(0);">二级菜单31</a>
<a href="javascript:void(0);">二级菜单32</a>
<a href="javascript:void(0);">二级菜单33</a>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 给最外层的 li 标签添加事件
var $lis = $(".wrap #menu >li")
// // 鼠标进入，让内部的子级的 ul 进行显示
// $lis.mouseenter(function() {
// $(this).children("ul").show()
// })
// // 鼠标离开，让内部的子级的 ul 进行隐藏
// $lis.mouseleave(function() {
// $(this).children("ul").hide()
// })
// 升级，让它进行运动的显示和隐藏：slideDown() 和 slideUp()
// 鼠标进入，让内部的子级的 ul 进行显示
$lis.mouseenter(function() {
// 动画开始之前，清空动画排队：stop(true)
$(this).children("ul").stop(true).slideDown(500)
// 鼠标离开，让内部的子级的 ul 进行隐藏
$lis.mouseleave(function() {
// 动画开始之前，清空动画排队：stop(true)
$(this).children("ul").stop(true).slideUp(500)
</script>
</body>
- jQuery排序和动画综合案例：手风琴轮播图
<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>手风琴轮播图</title>
<style>
margin: 0;
padding: 0;
list-style: none;
width: 1300px;
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
#box li {
float: left;
width: 240px;
height: 400px;
/* li 标签的背景图，需要使用 js 代码动态添加 */
</style>
</head>
<div id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 获取元素
var $lis = $("#box ul li");
var $box = $("#box");
// 模拟后台提供的图片数据
var arr = ["fq1.jpg", "fq2.jpg", "fq3.jpg", "fq4.jpg", "fq5.jpg"];
// 记录文件路径
var path = "images/fq/";
var during = 1000;
// 给每一个 li 去添加背景图
// 遍历方法：each()
$lis.each(function(i) {
// 存储路径
var url = "url(" + path + arr[i] + ")";
// this 指是的遍历的这一次的 li 元素
$(this).css("background-image", url)
// 给每个 li 标签添加鼠标进入事件，让自己的宽度变为 800，让其他的兄弟 变为 100
$lis.mouseenter(function() {
$(this).stop(true).animate({
"width": 800
}, during)
.siblings().stop(true).animate({
"width": 100
}, during)
// 给最外层的大例子添加鼠标离开事件，让所有的 li 恢复默认宽度
$("#box").mouseleave(function() {
$lis.stop(true).animate({
"width": 240
}, during)
</script>
</body>
- jQuery排序和动画综合案例：淡入淡出轮播图
<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>淡入淡出轮播图</title>
<style>
margin: 0;
padding: 0;
list-style: none;
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
.slider ul li {
position: absolute;
display: none;
.slider ul li:first-child {
display: block;
.arrow {
display: none;
.slider:hover .arrow {
display: block;
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
.arrow-left {
left: 0;
.arrow-right {
right: 0;
.slider ol {
position: absolute;
left: 100px;
bottom: 30px;
width: 240px;
height: 20px;
.slider ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
cursor: pointer;
.slider ol li.cur {
background-color: #fff;
</style>
</head>
<div class="slider">
<a href="#"><img src="images/jd/jd1.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd2.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd3.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd4.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd5.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd6.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd7.jpg" alt=""></a>
<a href="#"><img src="images/jd/jd8.jpg" alt=""></a>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
<!-- 下标 -->
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 获取元素
var $ulLis = $(".slider ul li");
var $olLis = $(".slider ol li");
// 信号量编程
var idx = 0;
// 自动播放函数
// 右按钮点击事件
$(".arrow-right").click(function() {
// 函数节点，防骚扰
if ($ulLis.eq(idx).is(":animated")) return;
// 让当前这一个 li 去淡出隐藏
$ulLis.eq(idx).fadeOut();
// 让信号量自加
idx++;
if (idx > $ulLis.length - 1) {
idx = 0;
move();
// 左按钮点击事件
$(".arrow-left").click(function() {
// 函数节点，防骚扰
if ($ulLis.eq(idx).is(":animated")) return;
// 让当前这一个 li 去淡出隐藏
$ulLis.eq(idx).fadeOut();
// 让信号量自减
idx--;
if (idx < 0) {
idx = $ulLis.length - 1;
move();
// 添加小圆点的事件
$olLis.click(function() {
// 函数节点，防骚扰
if ($ulLis.eq(idx).is(":animated")) return;
// 让当前的这一个 li 去淡出隐藏
$ulLis.eq(idx).fadeOut();
// 找到点击的当前的小圆点对应的下标，赋值给信号量
idx = $(this).index();
move();
// 封装公共部分：li 标签淡入显示部分
function move() {
// 让指定的一项 li 进行淡入显示
$ulLis.eq(idx).fadeIn();
$olLis.eq(idx).addClass("cur").siblings().removeClass("cur");
// 可以利用 JQ 中的 trigger() 方法，自动执行右按钮事件
function autoPlay() {
$(".arrow-right").trigger("click")
var timer = setInterval(autoPlay, 1000)
// 鼠标移上停止定时器
$(".slider").on("mouseenter", function() {
clearInterval(timer);