用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);

});