效果展示：
要实现一个点击按钮和底部按钮实现图片的轮播及自动轮播效果，我的思路是这样的：
按钮和图片均使用绝对定位进行布局，img全部堆叠在div中心并设置为透明，通过单独设置样式让其不透明来达到img切换效果，给每个img和对应的点设置index来进行绑定，设置定时器对index值进行修改来达到自动轮播。
CSS:
*{
margin: 0;
padding: 0;
list-style: none;
}
/*定义显示框大小，设置相对定位*/
.son{
margin:0 auto ;
width: 400px;
height: 400px;
position: relative;
}
/*左右切换按钮设置样式*/
.son .left,.son .right{
opacity: 0;
transition: 500ms;
width: 40px;
height: 80px;
background-color: black;
/* opacity: 0.3; */
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.son:hover .left,.son:hover .right{
opacity: 0.3;
}
/*左按钮设置位置*/
.son .left{
left: 0;
}
/*右按钮设置位置*/
.son .right{
right: 0;
}
/*左右按钮样式设置*/
.son .left div, .right div{
width: 30px;
height: 30px;
transform: rotate(45deg);
border-left: 3px solid white;
border-bottom: 3px solid white;
}
/*右按钮样式设置*/
.son .right div{
transform: rotate(-135deg);
}
/*图片设置*/
.son img{
z-index: 1;
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transform: translate(-50%,-50%);
transition: 500ms;
}
/*设置选中样式*/
.son .active{
opacity: 1;
}
/*下面四个点的位置设置*/
.dian{
position: absolute;
z-index: 3;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.dian ul{
width: 100px;
display: flex;
justify-content: space-around;
}
/*四个点的样式设置*/
.dian li{
transition: 500ms;
border-radius:100% ;
width: 15px;
height: 15px;
background-color: black;
border: 1px solid white;
opacity: 0.5;
}
/*点的选中样式*/
.dian .liactive{
background-color: aqua;
}HTML:
<div class="son">
<!--左按钮-->
<div class="left" onclick="pre()">
<div></div>
</div>
<!--图片-->
<img class="active" src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/2bf1b169-d217-44c3-a5b3-dd00813bc20d?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=23330623af515773e0bf2e01fa5b3cc8" alt="" />
<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/ac5b9977-78f3-4454-bc17-1f0c054d1e9c?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=0da0b741462bac5a6ce97235dcf16acc" alt="" />
<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/ce0cca1b-6473-456a-8f60-a772fa8881af?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=cd9f56b59bcd749726ff75bb14a66cc4" alt="" />
<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/d5d1426d-502b-4a6e-a7dd-92e406fc3ab1?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749044&t=12e5455d6508c0b5a7dc6a1ee233c601" alt="" />
<!--右按钮-->
<div class="right" onclick="next()">
<div></div>
</div>
<!--底部点-->
<div class="dian">
<ul>
<li class="liactive"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JavaScript:
// 绑定图片和点
var img = document.querySelector(".son").getElementsByTagName("img")
var dian = document.querySelector(".dian").getElementsByTagName("li")
// 设置一个下标
let index = 0;
//绑定img和dian的父类
var son = document.querySelector(".son")
// 绑定左右按钮
var left = document.querySelector('.left')
var right = document.querySelector('.right')
// 给图片和点设置下标及点击效果
for(var i = 0; i < dian.length; i++) {
img[i].dataset.index = i
dian[i].dataset.index = i
// 给点设置点击效果
dian[i].onclick = isclick
}
// 点击图片点切换
function isclick() {
// 获取当前的下标
index = this.dataset.index
// 清除添加的样式
for(var i = 0; i < img.length; i++) {
img[i].classList = ''
dian[i].classList = ''
}
// 添加样式
this.classList = 'liactive'
img[index].classList = 'active'
}
//上一张图片
function pre() {
if(index <= 0) {
index = 3
} else {
index--
}
qiehuan()
}
//下一张图片
function next() {
if(index >= 3) {
index = 0
} else {
index++
}
qiehuan()
}
// 点击切换图片
function qiehuan() {
for(var i = 0; i < img.length; i++) {
img[i].classList = ''
dian[i].classList = ''
}
dian[index].classList = 'liactive'
img[index].classList = 'active'
}
// 设置自动轮播
var T = setInterval(next, 1500)
// 当鼠标移入图片移除轮播效果
son.onmouseover = function() {
clearInterval(T)
}
//当鼠标移入图片添加移除效果
son.onmouseout = function() {
T = setInterval(next, 1500)
}