jquery로 이미지 슬라이더 만들기

Question

저는 jquery에 완전히 익숙합니다 (오늘 jquery에서 코드 아카데미 과정을 수강했습니다). 이미지 슬라이더를 만들려고합니다. 나는 일하는 생각을 가지고 있지만 근본적인 무언가를 놓치고있는 것처럼 느껴집니다. 무한히 실행되어 페이지가 열려있을 때 계속 실행되도록 설정했습니다. 누구든지 나를 도울 수 있습니까? 나는 CSS에서 0으로 설정된 모든 5 개의 이미지의 불투명도가 있고 내가 쓴 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); 

});