任务一：导航跟随效果
任务要求：
日常生活中，我们浏览一些网站，网站中会有一些动画效果，例如导航跟随效果，当鼠标指针移入导航的某一项时，指示条也跟随鼠标指针移动。本案例要求实现导航跟随的效果。
案例效果：
任务分析：
编写HTML代码，定义无序列表用于实现导航的结构。
编写CSS代码，用于为导航添加样式。
编写jQuery代码，创建自定义动画，实现导航跟随效果。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
ul {
height: 50px;
position: relative;
}
li {
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
font-weight: 500px;
}
span {
position: absolute;
left: 0;
top: 50px;
border: 2px solid #3FA1BF;
width: 95px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>关于我们</li>
<li>联系我们</li>
<span></span>
</ul>
<script>
var num = $('li').outerWidth();
$('li').mouseover(function () {
var index = $(this).index();
$('span').stop().animate({
left: num * index,
}, 300);
});
</script>
</body>
</html>
【训练1】根据所给素材实现图片横向轮播效果，如图所示。
参考答案：
【训练2】根据所给素材，实现Tab切换效果。用户移入选项卡时，当前选项卡添加样式，如图所示，其他选项卡不添加该样式，同时该选项卡的内容淡入显示。
参考答案：
