我將如何在jQuery中重復或循環img選擇器？

Question

我正在為練習制作幻燈片，如下圖所示。

 $(function skewSlide() { myIndex = 4; i = (2 * myIndex) - myIndex; $(setInterval(function() { myIndex-- n = (myIndex % 4) + 1; $('.modelbox img:nth-child('+ n +')').css({ 'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)' }) if (n == 1) { myIndex = 4; } console.log(n); }, 1000)) }) 

 #canvas { position: relative; width: 100%; max-width: 2560px; display: flex; flex-flow: row; overflow: hidden; margin: 0 auto; } .modelbox{ position: relative; width: 100%; height: 100vh; max-width: 2560px; object-fit: cover; transition: all 0.8s; } .modelbox img { top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all 1.2s ease-in-out; clip-path: polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%); } 

 <section id="canvas"> <div class="modelbox"> <img src="https://i.imgur.com/W20a2ZN.jpg" width="100%"> <img src="https://i.imgur.com/LGaLIEM.jpg" width="100%"> <img src="https://i.imgur.com/xvuGBMB.jpg" width="100%"> <img src="https://i.imgur.com/Y2Xsdkr.jpg" width="100%"> </div> </section> <script src="http://code.jquery.com/jquery-3.3.1.js"></script> 

剝離每個圖像工作正常。 但問題是我不知道如何重復/循環代碼中的圖像。

現在，當圖像全部剝離時，圖像不會循環。 剝離完成后，它只顯示白色背景。

我的目標是使在最后一個圖像下循環的圖像被剝離，它看起來像img-4，img-3，img-2，img-1，img-4，img-3，img-2，img- 1。 。 。

是循環圖像的任何方式或技巧嗎？

Answer 1

那是因為在你修改了每個圖像'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)'的CSS屬性'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)'后，你沒有' t在每個循環結束時將其設置回原始狀態（ clip-path: polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%); ）。

循環時，總是記得在每個循環結束后重置。

Answer 2

干得好。 如果你想用例子。

 $(function skewSlide() { var imgIndex = 0; var countImage = $(".modelbox img").length + 1; $(setInterval(function() { imgIndex++; $('.modelbox img:nth-child('+ imgIndex +')').css({'clip-path': 'polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%)'}); if (imgIndex >= countImage) { imgIndex = 0; for(var i=1;i<=4;i++) { $('.modelbox img:nth-child('+ i +')').css({ 'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)' }); } } console.log(imgIndex); }, 1000)) }) 

 #canvas { position: relative; width: 100%; max-width: 2560px; display: flex; flex-flow: row; overflow: hidden; margin: 0 auto; } .modelbox{ position: relative; width: 100%; height: 100vh; max-width: 2560px; object-fit: cover; transition: all 0.8s; } .modelbox img { top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all 1.2s ease-in-out; clip-path: polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%); } 

 <section id="canvas"> <div class="modelbox"> <img src="https://i.imgur.com/W20a2ZN.jpg" width="100%"> <img src="https://i.imgur.com/LGaLIEM.jpg" width="100%"> <img src="https://i.imgur.com/xvuGBMB.jpg" width="100%"> <img src="https://i.imgur.com/Y2Xsdkr.jpg" width="100%"> </div> </section> <script src="http://code.jquery.com/jquery-3.3.1.js"></script>