Javascript圖像滑塊無法正常工作

我正嘗試使用控件「Next」和「Previous」創建圖像滑塊。接下來，應該使用負餘量屬性向左滑動圖像以顯示第二個圖像。所有保存單獨圖像的列表元素都設置爲display: inline-block，因此每個列表元素可以彼此相鄰，而不是堆疊。Javascript圖像滑塊無法正常工作

但是，我發現，當第一張圖片向左滑動時，它仍然顯示出一點點，同時顯示第二張圖片，一次又一次地像這樣，所有東西都會滑動但不會完全。它們滑動的距離等於圖像的寬度。

此外，當我到達最後一張圖片並點擊下一張圖片時，應該返回到第一張圖片，問題是它會沿着第一張圖片的方式顯示每張圖片。

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"/> 
 
\t <div class="container"> 
 
\t \t <ul class="slide-wrapper"> 
 
\t \t \t <li class="slide active"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>1</h2> 
 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>2</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>3</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>4</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>5</h2> 
 

 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 

 

 
<!--<div class="test"> 
 

 
</div>--> 
 
\t <button class="nextBtn">Next</button> 
 
\t <button class="prevBtn">Previous</button>

我怎樣才能使這項工作做得很好嚴格香草的JavaScript？這裏是鏈接到jsfiddle。然而，它似乎並沒有在那裏工作。

來源

2017-01-10 ibnhamza

你可以創建和共享JS的小提琴嗎？我一定會幫你的。 – Abhinav

@Abhinav我已經用jsfiddle的鏈接更新了這個問題。 – ibnhamza

固定小提琴鏈接：https：//jsfiddle.net/a2bk4bwu/3/順便說一句，比js更多的CSS問題。而且，關於這一點：「另外，當我看到最後一張圖像並點擊下一張圖像時，應該返回到第一張圖像，問題是它會沿着第一張圖像的方向顯示每張圖像。」如果是這樣，你必須完整地應用幻燈片的不同邏輯 - 並相應地更改css – sinisake

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

替換你的CSS與該線UL &李

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

注意事項：

「UL公司被默認取微胖{webkit-padding-start：40px}
「display：inline-block」項目依賴於「空白」。所以給父元素「0px」刪除幻燈片之間的空白。

這些將解決您的CSS問題。

來源

2017-01-10 13:33:53 Abhinav

這工作。我想我需要重寫整個事情，它根本不流暢。謝謝 – ibnhamza

Javascript圖像滑塊無法正常工作

回答

相關問題