Let’s see the effect first.
Stop the carousel when the mouse hovers, and automatically rotate when you leave. Click the next small dot and it will move with it
directly on the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper {
width: 600px;
height: 350px;
border: 1px solid red;
position: relative;
}
/* 5张图片叠加到一块 */
.wrapper img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
.wrapper img:nth-of-type(1) {
display: block;
}
/* 小圆点 */
.btn {
width: 150px;
display: flex;
justify-content: space-around;
position: absolute;
left: 225px;
bottom: 10px;
z-index: 100
}
.btn span {
display: block;
width: 15px;
height: 15px;
border: 3px solid white;
border-radius: 50%;
}
/* 左右箭头 */
.wrapper a {
text-decoration: none;
font-size: 50px;
color: red;
position: absolute;
top: 35%;
}
.wrapper a:nth-of-type(1) {
left: 10px;
}
.wrapper a:nth-of-type(2) {
right: 10px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contain">
<img src="./imgs/1.png" alt="">
<img src="./imgs/2.png" alt="">
<img src="./imgs/3.png" alt="">
<img src="./imgs/4.png" alt="">
<img src="./imgs/5.png" alt="">
</div>
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:void(0);"><</a>
<a href="javascript:void(0);">></a>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
var index=0;
// 点击上一张
$("a:first").click(function(){
prev_pic();
})
// 点击下一张
$("a:last").click(function(){
next_pic();
})
// 悬浮停止
$(".wrapper").mouseover(function(){
clearInterval(id);
});
$(".wrapper").mouseout(function(){
autoplay();
})
// 下一张
function next_pic(){
index++;
if(index>4){
index=0;
}
addStyle();
}
// 上一张
function prev_pic(){
index--;
if(index<0){
index=4;
}
addStyle();
}
// 控制图片显示隐藏,小圆点背景色
function addStyle(){
$("img").eq(index).fadeIn();
$("img").eq(index).siblings().fadeOut();
$("span").eq(index).addClass("active");
$("span").eq(index).siblings().removeClass("active");
}
// 自动轮播
var id;
autoplay();
function autoplay(){
id=setInterval(function(){
next_pic();
},1000)
}
</script>
</body>
</html>
Here, just change the image address and quote the jquery file.