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

});