JavaScript圖像滑塊無法正常工作

Question

我正在嘗試使用“下一個”和“上一個”控件創建圖像滑塊。 接下來，應使用負的margin-left屬性向左滑動圖像，以顯示第二個圖像。 所有保存單個圖像的列表元素都設置為display: inline-block因此每個列表元素可以彼此相鄰站立而不是堆疊。

但是，我發現，當第一張圖像左移時，在顯示第二張圖像時，它仍然會露出一點點，這樣一來又一來，一切都不會完全滑動。 它們滑動的距離等於圖像的寬度。

另外，當我到達最后一張圖像並單擊下一步時，它應該返回到第一張圖像，問題在於它會在顯示第一張圖像的過程中顯示每個圖像。

 window.onload = function () { var nextBtn = document.getElementsByClassName("nextBtn")[0], prevBtn = document.getElementsByClassName("prevBtn")[0]; var i = 0; var imgList = document.querySelectorAll(".slide"); var slideLength = imgList.length; var lastchild = imgList[slideLength - 1]; nextBtn.addEventListener("click", Next, false); prevBtn.addEventListener("click", Previous, false); function Next() { console.log(slideLength) imgList[i].style.marginLeft = "-600px"; if (imgList[i].classList.contains("active")) { imgList[i].classList.remove("active"); } if (imgList[i] !== lastchild) { i++; } else if (imgList[i] === lastchild) { i = 0; for (var j = 0; j < slideLength; j++) { imgList[j].style.marginLeft = "0"; } } imgList[i].classList.add("active"); } function Previous(e) { console.log(i); if (i !== 0) { imgList[i - 1].style.marginLeft = "0"; i--; console.log(i); } else { console.log(i); } } } 

 ul{ width: 100%; height: 350px; border: solid 3px white; margin:100px auto; overflow: hidden; } li{ display:inline-block; position: relative; transition: all 1s cubic-bezier(1,-0.01, 0, 1.13); list-style: none; } li img{ width:600px; height:350px } .slide h2{ position: absolute; bottom:80px; text-align: center; margin: 0 auto; left: 250px; color: #fff; font-size: 4em; font-weight: 900; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <ul class="slide-wrapper"> <li class="slide active"> <img src="http://placehold.it/350x150" alt=""> <h2>1</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>2</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>3</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>4</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>5</h2> </li> </ul> </div> <!--<div class="test"> </div>--> <button class="nextBtn">Next</button> <button class="prevBtn">Previous</button> 

我如何才能嚴格使用香草javascript更好地完成這項工作？ 這是jsfiddle的鏈接。 但是，它似乎根本不起作用。

Answer 1

參考： https : //jsfiddle.net/a2bk4bwu/3/

用ul和li的行替換CSS

ul{
    width: 100%;
    height: 350px;
    border: solid 3px white;
    margin:100px auto;
    overflow: hidden;
    padding-left: 0;
    font-size: 0px;
}
li{
    font-size : 20px;
    display:inline-block;
    position: relative;
    transition: all 1s cubic-bezier(1,-0.01, 0, 1.13);
    list-style: none;
}

注意事項：

1. 默認情況下，“ Ul”進行了額外填充{webkit-padding-start：40px}
2. “ display：inline-block”項取決於“ white-space” 。 因此，將“ 0px”分配給父元素，以刪除幻燈片之間的空白。

這些將解決您的CSS問題。