用jQuery制作圖像滑塊

Question

我對jquery完全陌生（截止到今天，我剛剛上過jquery的代碼學院課程）。 我正在嘗試制作圖像滑塊。 我覺得我有工作思路，但缺少一些基本知識。 我希望它可以無限運行，因此我可以將其設置為在打開頁面時連續運行。 誰能幫我嗎？ 我在CSS中將所有5張圖片的不透明度都設置為0，並嘗試使用我編寫的jquery函數更改它。

我知道我可以使用CSS中的關鍵幀來做到這一點。 我對CSS非常了解。 我只是想在這一點上掌握javascript和jquery。 看一看：

 $(document).ready(function(){ var img = $('.slides'); for(i = 0; i <= $img.length; i++){ $img[i].style('opacity', 1); }; }); 

 /*gallery row*/ .img-slider-container{ margin: 10% 10%; } /*gallery list*/ .image-list{ } .image-list li{ list-style: none; display: inline-block; } .image-list li img{ display: block; width: 15em; opacity: 0; } /* gallery container */ .img-slider{ width: auto; } 

 <section class="img-slider-container row"> <div class="col-12 img-slider"> <ul class="image-list"> <li><img src="design/images/portfolio-images/one.jpg" class="slides" alt=""/></li> <li><img src="design/images/portfolio-images/two.jpg" class="slides" alt=""/></li> <li><img src="design/images/portfolio-images/three.jpg" class="slides" id="starting-image" alt=""/></li> <li><img src="design/images/portfolio-images/four.jpg" class="slides" alt=""/></li> <li><img src="design/images/portfolio-images/five.jpg" class="slides" alt=""/></li> </ul> </div> </section> 

Answer 1

使用setInterval無限地運行腳本。.而且您還錯誤地定義了$img它應該是$(img) 。 因此，請嘗試以下操作：

$(document).ready(function(){
  var img = $('.slides');
  setInterval(function(){for(i = 0; i <= $(img).length; i++){
    $(img[i]).css('opacity', 1)}
  },1000);

});