1.最近在學習JS的過程當中，爲了鞏固水平作了一個簡單的輪播圖，以及在作的過程當中發現一些問題（未解決！但願能夠有大佬能夠解釋這個問題）
2.代碼以下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wai{
width: 1000px;
height: 400px;
border: 10px solid grey;
margin: 50px auto;
position: relative;
}//定義外邊固定框
.tu{
width: 300px;
height: 200px;
position: absolute;
}//給輪播圖總體設計樣式
#one{
background-color: #70ff5d;
left: 350px;
top: 80px;
z-index: 5;
}
#two{
background-color: #4678ff;
left: 0px;
top: 60px;
z-index: 3;
}
#three{
background-color: #36ff7c;
left: 150px;
top: 50px;
z-index: 1;
}
#four{
background-color: #ff70d0;
left: 350px;
top: 30px;
z-index: 0;
}
#five{
background-color: #ffd942;
left:550px;
top: 40px;
z-index: 2;
}
#six{
background-color: #82ff87;
left: 700px;
top: 70px;
z-index: 4;
}
#seven{
background-color: rgba(112, 255, 93, 0);
left: 350px;
top: 80px;
z-index: 5;
}
#ba{
background-color: rgba(112, 255, 93, 0);
left: 350px;
top: 80px;
z-index: 5;
}//one~ba 給輪播圖逐個設計樣式
.button{
position: absolute;
left: 0px;
top: 150px;
width: 30px;
height: 80px;
z-index: 4;
font-size: 30px;
}
.button1{
position: absolute;
right: 0px;
top: 150px;
width: 30px;
height: 80px;
z-index: 4;
font-size: 30px;
}//給綁定事件的按鈕設計樣式
.wai>div>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wai">//固定框
<div class="tu" id="one"><img src="./image/timg.jpg" alt="" ></div>//輪播圖
<div class="tu" id="two"><img src="./image/timg1.jpg" alt="" ></div>//輪播圖
<div class="tu" id="three"><img src="./image/timg2.jpg" alt="" ></div>//輪播圖
<div class="tu" id="four"><img src="./image/timg3.jpg" alt="" ></div>//輪播圖
<div class="tu" id="five"><img src="./image/timg4.jpg" alt="" ></div>//輪播圖
<div class="tu" id="six"><img src="./image/timg5.jpg" alt="" ></div>//輪播圖
<div class="tu" id="seven"></div>
<div class="tu" id="ba"></div>
</div>
<script>
var tu=document.getElementsByClassName("tu");//獲取輪播圖的屬性
var a=document.getElementById("one");//獲取輪播圖的屬性
var b=document.getElementById("two");//獲取輪播圖的屬性
var c=document.getElementById("three");//獲取輪播圖的屬性
var d=document.getElementById("four");//獲取輪播圖的屬性
var e=document.getElementById("five");//獲取輪播圖的屬性
var f=document.getElementById("six");//獲取輪播圖的屬性
var g=document.getElementById("seven");//獲取輪播圖的屬性
var h=document.getElementById("ba");//獲取輪播圖的屬性
var tu1=[];
tu1[0]=window.getComputedStyle(a);//獲取輪播圖的樣式
tu1[1]=window.getComputedStyle(b);//獲取輪播圖的樣式
tu1[2]=window.getComputedStyle(c);//獲取輪播圖的樣式
tu1[3]=window.getComputedStyle(d);//獲取輪播圖的樣式
tu1[4]=window.getComputedStyle(e);//獲取輪播圖的樣式
tu1[5]=window.getComputedStyle(f);//獲取輪播圖的樣式
tu1[6]=window.getComputedStyle(g);//獲取輪播圖的樣式
tu1[7]=window.getComputedStyle(h);//獲取輪播圖的樣式
timer=setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}html
}//添加計時器，讓輪播圖自動旋轉
},1000);
var button=document.createElement("button");//建立按鈕元素
button.className="button";
button.innerHTML="<";
document.getElementsByClassName("wai")[0].appendChild(button);//插入按鈕元素
var button1=document.createElement("button");
button1.className="button1";
button1.innerHTML=">";
document.getElementsByClassName("wai")[0].appendChild(button1);
var wai=document.getElementsByClassName("wai");
button1.onmouseover=function () {
clearInterval(timer);
}
button.onmouseover=function () {
clearInterval(timer);
}//給按鈕添加進入事件
button1.onclick=function (){
setTimeout(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}app
}
},1);
}//給彎扭添加點擊事件
button.onclick=function (){
setTimeout(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1);
}//給彎扭添加點擊事件
button1.onmouseout=function (){
setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1000);
}//給按鈕添加鼠標離開事件
button.onmouseout=function (){
setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1000);
}
</script>
</body>
</html>
3.發現問題……在自動旋轉設置的過程當中，將第一個輪播圖的樣式給最後一個輪播圖後，在通過一圈的旋轉，輪播圖所有消失，而給以後添加多餘的輪播圖以後，效果實現，能夠循環旋轉且每一個輪播圖不會消失。
4.提出問題？爲何添加多餘的輪播圖後旋轉效果實現，不添加多餘輪播圖，全部輪播圖旋轉一週後逐個消失隱藏。ide