It mainly realizes the following functions:
1. Automatically switch pictures every 2 seconds with animation effects
2. Click the left and right arrows to switch pictures
3. Click the small dot at the bottom to jump to the picture
4. The color of the center of the small dot below the switched picture turns white
Let's see the effect
It has the same effect as the carousel image on Xiaomi's official website, except that it uses pictures from Taobao.
Carousel
upper code
<!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>