主要实现了以下几个功能：
1.每隔2秒自动切换图片且带有动画效果
2.点击左右箭头切换图片
3.点击底部小圆点跳转图片
4.切换到的图片下方小圆点中心颜色变白
下面来看看效果
和小米官网轮播图是一样的效果，只是用的是淘宝网的图片
轮播图
上代码
<!DOCTYPE html>
<html lang="en">
<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>lunbotu</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
}
.box{
width: 60%;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
img{
width: 100%;
height: 100%;
}
.arrow{
height: 80px;
width: 50px;
background-color: rgba(100, 100, 100, 0.5);
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
.right-arrow{
right: 0px;
}
ul{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
list-style: none;
}
li{
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #ccc;
border: 2px solid #666;
margin: 0px 10px;
}
li:nth-child(1){
background-color: #fff;
}
.img-box{
width: 100%;
height: 100%;
background-image: url('1.jpg');
background-size: 100% 100%;
transition: all 1.5s ease;
}
<×yle>
</head>
<!-- 轮播图框 -->
<div class="box">
<!-- 左箭头 -->
<div class="left-arrow arrow"><</div>
<!-- 右箭头 -->
<div class="right-arrow arrow">></div>
<!-- 图片主体 -->
<!-- <img src="1.png " alt=""> -->
<div class="img-box"></div>
<!-- 控制图片的小圆点 -->
<ul>
<li flag="1"><P>
<li flag="2"><P>
<li flag="3"><P>
<li flag="4"><P>
</ul>
</div>
<script>
//定义控制图片的序号
var imgNo = 1;
//右箭头点击事件
$('.right-arrow').click(function(){
imgNo++;
if(imgNo==5){
imgNo=1;
}
$('.img-box').css('background-image',`url("${imgNo}.jpg")`)
changgeDot();
})
//左箭头点击事件
$('.left-arrow').click(function(){
imgNo--;
if(imgNo==0){
imgNo=4;
}
$('.img-box').css('background-image',`url("${imgNo}.jpg")`)
changgeDot();
})
//改变小圆点样式
function changgeDot(){
$('li').css('background-color','#ccc')
$(`li:eq(${imgNo-1})`).css('background-color','#fff')
}
//定时切换图片
setInterval(function(){
$('.right-arrow').click()
},2000)
$('li').click(function(){
var flag = $(this).atrr('flag');
$('.img-box').css('background-image',`url("${flag}.jpg")`);
imgNo=flag;
changgeDot()
})
// </script>
</body>
<html>