效果图
功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换
方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
#box{
width: 800px; height: 340px;
margin: 100px auto;
position: relative;
}
.aaa{
width: 800px; height: 300px;
line-height: 300px; text-align: center;
font-size: 100px; color: #fff;
position: absolute; top: 0; left: 0;
}
#div1{
background: red;
z-index: 1;
}
#div2{
background: green;
}
#nav{
width: 100px; height: 20px;
position: absolute; bottom: 0; left: 50%;
margin-left: -50px;
}
#nav p{
width: 20px; height: 20px;
border-radius: 10px;
background: #ccc;
margin: 0 10px;
float: left;
cursor: pointer;
}
#nav .active{
width: 40px;
background: blue;
}
</style>
<script>
$(function(){
// 全局变量
var c = 0;
var aaa = $("#box .aaa");
// 定义自动切换效果
function gunDongBoFang(){
c++; //c = 1
if(c == aaa.length){
c = 0;
};
console.log(c);
// 当自身显示时，兄弟元素隐藏
aaa.eq(c).show().siblings(".aaa").hide();
// 字符串值无法创建动画(比如：background-color：red)
$("#nav p").eq(c).animate({width:"40px"}, 500).css({backgroundColor:"blue"})
.siblings("p").css({backgroundColor:"#ccc", width:"20px"});
};
// 定义单击小圆点切换效果
function danJiBoFang(obj){
// 获取当前单击对象的下标值
c = obj.index();
// 当自身显示时，兄弟元素隐藏
aaa.eq(c).show().siblings(".aaa").hide();
// 字符串值无法创建动画(比如：background-color：red)
$("#nav p").eq(c).animate({width:"40px"}, 500).css({backgroundColor:"blue"})
.siblings("p").css({backgroundColor:"#ccc", width:"20px"});
};
// 定义单击小圆点事件
$("#nav p").click(function(){
danJiBoFang($(this));
})
// 定时器，每2秒执行一次
var time = setInterval(gunDongBoFang, 2000);
// 鼠标移入#box元素中，停止定时器
$("#box").mouseenter(function(){
clearInterval(time);
});
// 鼠标移出#box元素后，开始定时器
$("#box").mouseleave(function(){
//鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加
time = setInterval(gunDongBoFang, 2000);
});
});
</script>
</head>
<body>
<div id="box">
<div class="aaa" id="div1">0</div>
<div class="aaa" id="div2">1</div>
<!-- 图片下方两个小圆点 -->
<div id="nav">
<p class="active"></p>
<p></p>
</div>
</div>
</body>
</html>