效果图
功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换
<!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: 100%; height: 350px;
margin-top: 100px;
}
.bg0{background: #0D2736;}
.bg1{background: #0F0909;}
.bg2{background: #283F75;}
.bg3{background: #405CDA;}
#slide{
width: 800px; height: 350px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#zxw{
width: 4000px; height: 35px;
position: absolute; top: 0; left: 0px;
}
#zxw li{
float: left;
}
#zxw li a{
display: block; width: 800px; height: 350px;
position: relative;
}
#zxw li a img{
width: 100%; height: 100%;
}
/* --------- */
#zxw li a span{
font-size: 150px; text-align: center;
position: absolute; color: #fff;top: 100px; left: 350px;
}
/* ----------- */
#nav{
width: 160px; height: 20px;
position: absolute; bottom: 10px; left: 50%;
margin-left: -80px;
}
#nav li{
width: 20px; height: 20px;
border-radius: 50%;
background: #ccc;
float: left;
margin: 0 10px;
cursor: pointer;
}
#nav .active{
background: blue;
}
#prev, #next{
width: 25px; height: 50px;
background: #fff;
position: absolute; top: 150px;
cursor: pointer;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
#prev img, #next img{
width: 100%; height: 100%;
}
</style>
<script>
$(function(){
// 全局变量
var c = 0;
var zxw = $("#zxw li");
var nav = $("#nav li");
// 定义幻灯片自动切换效果
function ziDongQieHuan(){
c++; //c = 1 2
if(c == zxw.length){
c = 1;
$("#zxw").css({left:0});
}
$("#zxw").animate({left:c*-800+"px"}, 500);
// 定义小圆点和背景颜色自动切换效果
if(c == nav.length){
$("#nav li").eq(0).addClass("active").siblings("li").removeClass("active");
$("#box").attr("class", "bg0")
}else{
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#box").attr("class", "bg"+c);
};
};
// 定义点击小圆点切换效果
function dianJiQieHuan(obj){
// 获取当前点击对象的下标值
c = obj.index();
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定义点击左耳朵切换效果
function prev(){
c--;
if(c<0){
c = nav.length-1;
};
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定义点击右耳朵切换效果
function next(){
c++;
if(c > nav.length-1){
c = 0;
};
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定时器，每2秒执行一次
var time = setInterval(ziDongQieHuan, 2000);
// 鼠标移入#box元素中，停止定时器
$("#slide").mouseenter(function(){
clearInterval(time);
});
// 鼠标移出#box元素后，开始定时器
$("#slide").mouseleave(function(){
//鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加
time = setInterval(ziDongQieHuan, 2000);
});
// 定义小圆点点击事件
$("#nav li").click(function(){
// $(this):当前点击的对象
dianJiQieHuan($(this));
});
// 定义左耳朵点击事件
$("#prev").click(function(){
prev();
});
// 定义右耳朵点击事件
$("#next").click(function(){
next();
});
});
</script>
</head>
<body>
<!-- 最外层盒子开始 -->
<div id="box" class="bg0">
<!-- 幻灯片盒子开始 -->
<div id="slide">
<!-- 幻灯片开始 -->
<ul id="zxw">
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg">
<span>0</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080410588630.jpg">
<span>1</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080408097382.jpg">
<span>2</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200624/202006240832286533.jpg">
<span>3</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg">
<span>4</span>
</a></li>
</ul>
<!-- 幻灯片结束 -->
<!-- 小圆点开始 -->
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 小圆点结束 -->
<!-- 左右两侧耳朵开始 -->
<div id="prev"><img src="./prev.png"></div>
<div id="next"><img src="./next.png"></div>
<!-- 左右两侧耳朵结束 -->
</div>
<!-- 幻灯片盒子结束 -->
</div>
<!-- 最外层盒子结束 -->
</body>
</html>
reset.css
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-size:16px; font-family:"微软雅黑"; color: #333;}
b{font-weight: normal;}
i{font-style: normal;}
a, a:hover, a:active{text-decoration: none; color: #333;}
input,textarea,select{outline: none;}
img{border: none; vertical-align: middle;}
li{list-style-type: none;}
.fl{float: left;}
.fr{float: right;}
.cl{clear: both;}
.clearfix::after{
content: "";
display: table;
clear: both;
}