關于圖片輪播圖的一個簡單實例以及實例中發現問題

發布時間：2020-03-30 23:59:01 來源：網絡閱讀：589 作者：前端二弟欄目：web開發

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);
}

   }//添加計時器，讓輪播圖自動旋轉

},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);
}

        }

    },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.提出問題？為什么添加多余的輪播圖后旋轉效果實現，不添加多余輪播圖，所有輪播圖旋轉一周后逐個消失隱藏。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

關于圖片輪播圖的一個簡單實例以及實例中發現問題

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

關于圖片輪播圖的一個簡單實例 以及實例中發現問題

猜你喜歡

最新資訊

相關推薦

相關標簽

關于圖片輪播圖的一個簡單實例以及實例中發現問題