可滾動圖片庫循環在最后一張圖片之后工作，它應該再次從第一張圖片開始

Question

我正在嘗試使用 javascript 創建一個可滾動的圖片庫，因此我可以創建它，但現在我希望它像無限循環一樣工作，即一旦到達最后一張圖片，然后在下次單擊時，它應該再次從第一張圖片開始

這是我的 html 代碼

 var width = 130; // image width var count = 4; // visible images count var list = carousel.querySelector('ul'); var listElems = carousel.querySelectorAll('li'); var position = 0; // shift left document.querySelector('.prev').onclick = function() { position += width * count; position = Math.min(position, 0); list.style.marginLeft = position + 'px'; }; // shift right document.querySelector('.next').onclick = function() { position -= width * count; position = Math.max(position, -width * (listElems.length - count)); list.style.marginLeft = position + 'px'; };

 .carousel { position: relative; width: 508px; padding: 10px 40px; border: 1px solid #CCC; border-radius: 15px; background: #eee; } .carousel img { width: 130px; height: 130px; } .arrow { position: absolute; top: 40%; padding: 0; background: #ddd; border-radius: 15px; border: 1px solid gray; font-size: 24px; line-height: 24px; color: #444; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 530px; overflow: hidden; } .gallery ul { height: 130px; width: 10000px; margin: 0; padding: 0; list-style: none; transition: margin-left 350ms; font-size: 0; } .gallery li { display: inline-block; }

 <div class="carousel" id="carousel"> <button class="arrow prev">⇦</button> <div class="gallery"> <ul class="images"> <li><img src="https://en.js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/2.png"></li> <li><img src="https://en.js.cx/carousel/3.png"></li> <li><img src="https://en.js.cx/carousel/4.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/6.png"></li> <li><img src="https://en.js.cx/carousel/7.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li> <li><img src="https://en.js.cx/carousel/9.png"></li> <li><img src="https://en.js.cx/carousel/10.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li> </ul> </div> <button class="arrow next">⇨</button> </div>

它工作正常，就像單擊按鈕圖像正在 srcolling 一樣，但我希望它可以無限循環滾動

Answer 1

在將position的變量分配給style.marginLeft之前，您可以通過檢查來做到這style.marginLeft ：

• 對於next按鈕， position變量等於-((the number of the carousel elements - four (as 4 cards should be shown)) multiplied by the width of an element)通常-((listElems.length - 4) * width)然后將0分配給position以便輪播重新開始。
• 對於prev按鈕時， position可變等於0則分配給它-((the number of the carousel elements - four (as 4 cards should be shown)) multiplied by the width of an element) 。

這是一個演示：

 var width = 130; // image width var count = 4; // visible images count var list = carousel.querySelector('ul'); var listElems = carousel.querySelectorAll('li'); var position = 0; // shift left document.querySelector('.prev').onclick = function() { position += width * count; position = Math.min(position, 0); /** check if we have to loop back from the end **/ position === 0 && (position = -((listElems.length - 4) * width)); list.style.marginLeft = position + 'px'; }; // shift right document.querySelector('.next').onclick = function() { position -= width * count; position = Math.max(position, -width * (listElems.length - count)); /** check if we have to loop back from the begining **/ position === -((listElems.length - 4) * width) && (position = 0); list.style.marginLeft = position + 'px'; };

 .carousel { position: relative; width: 508px; padding: 10px 40px; border: 1px solid #CCC; border-radius: 15px; background: #eee; } .carousel img { width: 130px; height: 130px; } .arrow { position: absolute; top: 40%; padding: 0; background: #ddd; border-radius: 15px; border: 1px solid gray; font-size: 24px; line-height: 24px; color: #444; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 530px; overflow: hidden; } .gallery ul { height: 130px; width: 10000px; margin: 0; padding: 0; list-style: none; transition: margin-left 350ms; font-size: 0; } .gallery li { display: inline-block; }

 <div class="carousel" id="carousel"> <button class="arrow prev">⇦</button> <div class="gallery"> <ul class="images"> <li><img src="https://en.js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/2.png"></li> <li><img src="https://en.js.cx/carousel/3.png"></li> <li><img src="https://en.js.cx/carousel/4.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/6.png"></li> <li><img src="https://en.js.cx/carousel/7.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li> <li><img src="https://en.js.cx/carousel/9.png"></li> <li><img src="https://en.js.cx/carousel/10.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li> </ul> </div> <button class="arrow next">⇨</button> </div>