HTML部分:
<div class="circle">
<img src="images\轮播图1.jpg" alt="">
<img src="images\轮播图2.jpg" alt="">
<img src="images\轮播图3.jpg" alt="">
<img src="images\轮播图4.jpg" alt="">
<img src="images\轮播图5.webp" alt="">
<img src="images\轮播图6.webp" alt="">
<img src="images\轮播图7.webp" alt="">
<div class="leftar iconfont"></div>
<div class="rightar iconfont"></div>
<div style="width: 100%; position: absolute;bottom: 0.45rem;">
<div class="libox">
</div>
</div>
</div>
Less部分:
.circle{
position: relative;
width: 100%;
height: 37.1vw;
overflow: hidden;
// background-color: #333333;
>img{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.leftar{
position: absolute;
top:16vw;
left: 0;
width: 1.25rem;
font-size: 1.25rem;
color: #007aff;
transform: rotate(180deg);
&:hover{
cursor: pointer;
}
}
.rightar{
position: absolute;
top:16vw;
right: 0;
width: 1.25rem;
font-size: 1.25rem;
color: #007aff;
&:hover{
cursor: pointer;
}
}
.libox{
justify-content: center;
display: flex;
height: 0.25rem;
>li{
width: 0.3125rem;
float: left;
font-size: 0.35rem;
color: #5d5d5d;
opacity: .5;
&:hover{
cursor: pointer;
}
}
>li:first-child{
color: blue;
}
}
}
js部分:
const eli = '<li>'
const imglist = document.querySelectorAll('.circle img');
const lilist = document.querySelector('.libox');
const left = document.querySelector('.leftar');
const right = document.querySelector('.rightar');
let mark = 0;
let flag = 1;
let str = '';
//分割线
for (let i = 0; i < imglist.length; i++) {
str += eli;
}
lilist.innerHTML = str;
for (let i = 0; i < imglist.length; i++) {
imglist[i].style.left = i*100+'%';
}
//以上是添加底部小圆点
for (let i = 0; i < lilist.children.length; i++) {
lilist.children[i].addEventListener('click',function(){
if (flag==1) {
flag = 0;
throttling();
clearInterval(timer1);
for (let j = 0; j < lilist.children.length; j++) {
lilist.children[j].style.color = "#5d5d5d";
}
for (let j = 0; j < imglist.length; j++) {
move(imglist[j],-parseInt(imglist[i].style.left));
}
lilist.children[i].style.color = "blue";
mark = i;
set();
}
});
}
//以上是为小圆点绑定事件
left.addEventListener('click',function(){
if (flag == 1) {
flag = 0;
throttling();
clearInterval(timer1);
for (let i = 0; i < imglist.length; i++) {
if(mark == 0) {
adjustLeft(i);
move(imglist[i],100);
}
else{
move(imglist[i],100);
}
}
mark = mark < 1 ? imglist.length-1 : mark-1;
trun(mark);
set();
}
})
//以上是为左箭头绑定事件
right.addEventListener('click',function(){
if (flag == 1) {
flag = 0;
throttling();
clearInterval(timer1);
for (let i = 0; i < imglist.length; i++) {
if(mark == imglist.length-1) {
adjust(i);
move(imglist[i],-100);
}
else{
move(imglist[i],-100);
}
}
mark = mark > imglist.length-2 ? 0 : mark+1;
trun(mark);
set();
}
})
//以上是为右箭头绑定事件
function trun(i){
for (let j = 0; j < lilist.children.length; j++) {
lilist.children[j].style.color = "#5d5d5d";
}
lilist.children[i].style.color = "blue";
mark = i;
}
//以上是改变选中小圆点颜色的函数
function move(a,target){
let chu = 50;
let i = 0;
let distance = target/chu;
clearInterval(a.timer);
a.timer = setInterval(function(){
flag = 0;
a.style.left = parseInt(a.style.left) + distance + '%';
i++;
if(chu==i){
clearInterval(a.timer);
flag = 1;
if (mark == 0) {
for (let j = 0; j < imglist.length; j++) {
imglist[j].style.left = j*100+'%';
}
}
if (mark == imglist.length-1) {
for (let j = 0; j < imglist.length; j++) {
imglist[j].style.left = (j-(imglist.length-1))*100+'%';
}
}
}
},6);
}
//以上是以百分比为单位的动画函数
function adjust(i) {
let j = parseInt(imglist[i].style.left)/100;
j = j < 0 ? j+imglist.length : j;
imglist[i].style.left = j*100+'%';
}
//以上实现了最后一张接第一张(只限箭头操作)
function adjustLeft(i) {
let j = parseInt(imglist[i].style.left)/100;
j = j >0 ? j-imglist.length : j;
imglist[i].style.left = j*100+'%';
}
//以上实现了第一张接最后一张(只限箭头操作)
function set() {
timer1 = setInterval(function() {
for (let i = 0; i < imglist.length; i++) {
if(mark == 6) {
adjust(i);
move(imglist[i],-100);
}
else{
move(imglist[i],-100);
}
}
mark = mark > imglist.length-2 ? 0 : mark+1;
trun(mark);
console.log(mark);
},3500)
}
//以上实现了自动轮播
function throttling() {
setTimeout(function() {
flag = 1;
console.log('ok');
},500);
}
//以上实现了节流阀
set();
//分割
window.onblur = function() {
clearInterval(timer1);
}
window.onfocus = function() {
clearInterval(timer1);
set();
}
//以上让轮播图在后台停止运行
实现效果: