我的问题是在edge和谷歌浏览器最后一张切回第一张或者第一张切到最后一张，切到位后会闪一下。
第一次打开文件会有轮播不均问题，实在找不到解决方法，只好来找各up主了。
下面是源码复制保存为html格式即可使用。
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
ul,li{
list-style-type: none;
}
.RotationChartAndLoginBox{
margin: 10% auto;
padding: 0;
width: 882px;
height: 357px;
}
#RotationChartModule{
width: 564px;
height: 315px;
margin-top: 10px;
position: relative;
float: left;
}
.PictureRotation{
width: 564px;
height: 315px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.tation_img{
position: relative;
}
.tation_img img{
width: 564px;
height: 315px;
display: block;
border-radius: 10px;
opacity: 1;
}
.tation_img.active{
z-index: 10;
opacity: 1;
}
.RotationDot_Dot{
position: absolute;
left: 244px;
width: auto;
height: 9px;
z-index: 13;
top: 269px;
padding: 3px 5px;
background-color: rgba(255, 255, 255, .3);
border-radius: 50px;
}
.rotation_Dot{
width: 9px;
height: 9px;
background-color: #fff;
float: left;
margin: 0 3px;
border-radius: 50px;
cursor: pointer;
}
.rotation_Dot.active{
background-color: #ff5000;
}
.leftButton{
width: 20px;
height: 30px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 130px;
left: 0;
z-index: 40;
border: none;
cursor: pointer;
}
.leftButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.leftIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
left: 2px;
top: 0px;
}
.rightButton{
width: 20px;
height: 30px;
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 130px;
right: 0;
z-index: 40;
border: none;
cursor: pointer;
}
.rightButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.rightIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
right: 1px;
top: 0;
}
</style>
<script>
window.addEventListener('load',function(){
tation();
});
function tation(){
var PictureRotation = document.querySelector('.PictureRotation');
var leftButton = document.getElementsByClassName('leftButton')[0];
var rightButton = document.getElementsByClassName('rightButton')[0];
var tation_imgBox = PictureRotation.children[0];//获取父级元素下面的子元素（又名节点）
var width = PictureRotation.offsetWidth;
var RotationDot_Dot = PictureRotation.children[1];
var btn = document.getElementsByClassName('btn')[0];
tation_imgBox.appendChild(tation_imgBox.children[0].cloneNode(true));//克隆1号图片到末尾
tation_imgBox.insertBefore(tation_imgBox.children[4].cloneNode(true),tation_imgBox.children[0]);//把5号图片克隆到1号图片前面
var btnClick = true;//点击延时开挂
tation_imgBox.style.transform = 'translate3d(' + -564 + 'px'+',0,0)';//所有节点的translate3d-564
var index = 0;
var timer = setInterval(function(){
index++;
TranSlate();
},3000);
//所有节点的translate3d-564px
// 是为了不显示克隆的5号节点实现左切换僵硬有空白跟大部分的轮播图原理相同又有一点点差别
tation_imgBox.addEventListener('transitionend',function(){
if(index < 0){
index = 4;
tation_imgBox.style.transition = 'none';
var translate3d = -564 -index * width;//所有节点的translate3d-564px
tation_imgBox.style.transform = 'translate3d(' + translate3d + 'px'+',0,0)';
}else if(index >= 5){
index = 0;
tation_imgBox.style.transition = 'none';
var translate3d = -564 -index * width;//所有节点的translate3d-564px
tation_imgBox.style.transform = 'translate3d(' + translate3d + 'px'+',0,0)';
}
QuerySelector();
});
PictureRotation.onmouseover = function(){
btn.style.visibility = 'visible';
clearInterval(timer);
};
PictureRotation.onmouseout = function(){
btn.style.visibility = 'hidden';
timer = setInterval(function(){
index++;
TranSlate();
},3000); };
RotationDot_Dot.addEventListener('click',function(e){
var e = e || window.event;
var inX = e.target || e.srcElement;
if(inX.className == 'rotation_Dot') {
index = inX.getAttribute('data-tation') || inX.dataset.tation;
TranSlate();
QuerySelector();
};
});
rightButton.addEventListener('click',function(){
if(btnClick){
btnClick = false;
index++;
clearInterval(timer);
TranSlate();
setTimeout(function(){
btnClick = true;
},700);
}else{
return false;
};
});
leftButton.addEventListener('click',function(){
if(btnClick){
btnClick = false;
index--;
clearInterval(timer);
TranSlate();
setTimeout(function(){
btnClick = true;
},700);
}else{
return false;
};
});
function TranSlate(){
var translate3d = -564 -index * width;//所有节点的translate3d-564
tation_imgBox.style.transition = 'all 300ms';
tation_imgBox.style.transform = 'translate3d(' + translate3d + 'px'+',0,0)';
};
function QuerySelector(){
RotationDot_Dot.querySelector('.active').classList.remove('active');
RotationDot_Dot.children[index].classList.add('active');
};
};
</script>
<body>
<div class="RotationChartAndLoginBox">
<div id="RotationChartModule">
<div class="PictureRotation">
<div id="tation_imgBox" style="position:absolute;width: 3948px;overflow:hidden;transition:all 0.3s;transform:translate3d(-564px,0,0);backface-visibility:hidden;">
<div class="tation_img" style="float:left;width:564px;" data-rotaion="0"><a href=""><img src="./imge/O1CN011yBJBI1FtCEaHaebh_!!6000000000544-2-octopus.png" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="1"><a href=""><img src="./imge/O1CN013jhNY51VGkqFZezAz_!!6000000002626-0-octopus.jpg" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="2"><a href=""><img src="./imge/O1CN01uFc5A720osRJbUXo9_!!6000000006897-2-octopus.png" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="3"><a href=""><img src="./imge/O1CN01q68omo1PFU3CIDAub_!!6000000001811-2-octopus.png" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="4"><a href=""><img src="./imge/O1CN01VCxO9H1ujwTZEUBOU_!!6000000006074-0-octopus.jpg" alt=""></a></div>
</div>
<ul class="RotationDot_Dot">
<li class="rotation_Dot active" data-tation="0"></li>
<li class="rotation_Dot" data-tation="1"></li>
<li class="rotation_Dot" data-tation="2"></li>
<li class="rotation_Dot" data-tation="3"></li>
<li class="rotation_Dot" data-tation="4"></li>
</ul>
<div class="btn" style="visibility:hidden;">
<button class="leftButton"><i class="leftIcon">◄</i></button>
<button class="rightButton"><i class="rightIcon">►</i></button>
</div>
</div>
</div>
</body>
</head>
</html>
