フェードトランジションエフェクトと自動画像変更を追加する

こんにちは、私はJavaScriptを初めて使い、開発中のこのコード用のソリューションを作成するのが難しいです。
スライドショーにフェードトランジションエフェクトを追加する必要があります（イメージが別のものに変わります）。画像は既存のボタンに加えて自動的に変更されるはずです。ここでは、完全なコードは次のとおりです。
EDIT：I（@albert）は、スニペットにコードを入れて、ちょうど私が出会った最初の2つのイメージをつかんで...フェードトランジションエフェクトと自動画像変更を追加する

var slideIndex = 1; 
 
    showDivs(slideIndex); 
 
    function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
    } 
 

 
    function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
    } 
 
    function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slides"); 
 
    var dots = document.getElementsByClassName("active"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " white"; 
 
    }

.circle{ 
 
    height:9px; 
 
    width:9px; 
 
    padding:0; 
 
    background-color:#000; 
 
    } 
 
    .container{ 
 
      position:relative; 
 
       max-width:800px; 
 
       max-height:350px; 
 
       overflow:hidden; 
 
    } 
 
    .centered{ 
 
      text-align:center; 
 
       margin-bottom:16px; 
 
       font-size:18px; 
 
       color:white; 
 
      position:absolute; 
 
       left:0; 
 
       bottom:0;    
 
    } 
 
    .left-arrow{ 
 
      float:left; 
 
       padding-left:16px; 
 
       cursor:pointer 
 
    } 
 
    .right-arrow{ 
 
      float:right; 
 
       padding-right:16px; 
 
       cursor:pointer 
 
    } 
 
    .arrow:hover{ 
 
       color:#b4aa50; 
 
    } 
 
    .arrow{ 
 
      -webkit-transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
      transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
    } 
 
    .circle-b{ 
 
       border:1px solid #fff; 
 
      background-color:transparent; 
 
        -webkit-transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
        transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
    } 
 
    .circle-b:hover{ 
 
       color:#000; 
 
       background-color:#fff;     
 
    } 
 

 
    .white{ 
 
       color:#000;background-color:#fff} 
 
    }

<div class="container"> 
 
    
 
    <img class="slides" src="https://i.stack.imgur.com/b9ukx.png" style="width:100%"> 
 
    <img class="slides" src="https://i.stack.imgur.com/wx8jF.png" style="width:100%"> 
 
    
 
     <div class="centered" style="width:100%"> 
 
      <div class="left-arrow arrow" onclick="plusDivs(-1)">&#10094</div> 
 
      <div class="right-arrow arrow" onclick="plusDivs(1)">&#10095</div> 
 
      <span class="circle active circle-b " onclick="currentDiv(1)"> </span> 
 
      <span class="circle active circle-b " onclick="currentDiv(2)"> </span> 
 
    </div> 
 
    </div>

出典

2016-08-09 Pablit0

これは、純粋なCSSで可能です。あなたはその解決策を気にしますか？これにはjavascriptが必要ですか？ – albert

私がこれを書きましたhttps://jsfiddle.net/bartlomiej/kdg581sL/（JavaScript設定でload type〜no wrap - in <body>に設定する必要があります）

私はそれがあなたが達成したいと思っていたことを望みます。

最初にslideIndexの初期値を0に設定しました。

var slideIndex = 0;

そして私はlengthに、その配列のslides変数とセットの長さに画像要素の配列を保存します。 stateIndexで定義された画像要素に

var slides = document.getElementById('slides').children 
var length = slides.length

次の行セットクラスactive。

showPrevSlide()スライドが最初にされていない場合のみ、前のスライドにクラスactiveを設定します。

setActiveSlide(slideIndex);

はその後、我々は3つの機能を必要とします。スライドは最後の1されていない場合のみ次のスライドにクラスactiveを設定

function showPrevSlide() { 
    if (slideIndex - 1 != -1) { 
    slideIndex -= 1; 
    } 

    setActiveSlide(slideIndex); 
}

showNextSlide()。すべての画像要素を反復処理し、indexで定義された画像要素にactiveクラスを追加

function showNextSlide() { 
    if (slideIndex + 1 < length) { 
    slideIndex += 1; 
    } 

    setActiveSlide(slideIndex); 
}

そして最後にsetActiveSlide()。

function setActiveSlide(index) { 
    for (var i = 0; i < length; i++) { 
    if (index == i) { 
     slides[i].className += ' active'; 
    } else { 
     slides[i].className = 'slide'; 
    } 
    } 
}

あなたはtransitionとopacity CSSプロパティを使用する必要があり、スライド上のフェードトランジション効果に到達するために。 positionをabsoluteに設定する必要がありますので、画像が重なり合うように配置してください。

.slide { 
position: absolute; 
opacity: 0; 
transition: 1s; 
}

およびactiveクラススタイル。

.slide.active { 
    opacity: 1; 
}

私の回答があなたを助けてくれることを願っています。

編集：無限の方法でスライドを変更する場合は、showPrevSlide()とshowNextSlide()を少し編集する必要があります。

function showPrevSlide() { 
    if (slideIndex - 1 == -1) { 
    slideIndex = length - 1; 
    } else { 
    slideIndex -= 1; 
    } 

    setActiveSlide(slideIndex); 
} 

function showNextSlide() { 
    if (slideIndex + 1 < length) { 
    slideIndex += 1; 
    } else { 
    slideIndex = 0; 
    } 

    setActiveSlide(slideIndex); 
}

画像を自動的に変更したい場合は、setIntervalを使用してください。次に例を示します。setInterval(function() { showNextSlide() }, 1000);1000の時刻はmsです。

出典

2016-08-10 02:10:39

ご協力ありがとうございます。私はちょうどこのコードに自動的に画像を変更する必要があります。出来ますか？ – Pablit0

私はまた、画像を変更する "無限の"可能性が必要です。（最後の画像がアクティブなときに右矢印をクリックすると、最初のコードからコードが再開し、左矢印も同じです） – Pablit0

私は自分の答えを編集し、必要な機能を実装しました。 –

フェードトランジションエフェクトと自動画像変更を追加する

答えて

関連する問題