スライドショーをイメージにフェードインする必要があります

Question

スライドショーの既存のコードでイメージにフェードインとフェードアウトを追加する必要があります。ユーザーがボタンをクリックすると、画像はフェードイン/フェードアウトする必要があります。ここに私のコードです。

HTML：

<div id="imageSlider"> 

<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button> 

    <button id="nextBTN" onclick="next()"> <b>Next</b> </button> 
</div> 

---

Javascriptを：

var images = [ 
    "HTMLcert.jpg", 
    "CSScert.jpg", 
    "javaScriptCert.jpg", 
    "PHPcert.jpg" 
]; 

var num = 0; 

function next() { 
    var slider = 
    document.getElementById("slider"); 
    num++; 
    if (num >= images.length) { 
    num = 0; 
    } 
    slider.src = images[num]; 
} 

function prev() { 
    var slider = 
    document.getElementById("slider"); 
    num--; 
    if (num <= 0) { 
    num = images.length - 1; 
    } 
    slider.src = images[num]; 
} 

---

どのようにして既存のJavaスクリプトコードにフェードインとフェードアウトを追加できますか？

Answer 1

をあなたのCSSは次のようになります：

.active { 
    animation: fade 1s; 
} 

@keyframes fade { 
    from { opacity: 0; } 
    to { opacity: 1 } 
} 

Answer 2

カスタムアニメーションを作成し、最後にこのクラスを使用してクラスを追加し、ボタンをクリックしながらクラスを切り替えることで、CSS3アニメーションを使用して行うことができます。

作業スニペット怒鳴る：その後、

var slider = document.getElementById("slider"); 
slider.className += " active"; 
setTimeout(function(){ 
    slider.classList.remove("active"); 
}, 100); 

そして：あなたはこのようなあなたのjavascript関数で活躍スライダー要素にクラスを追加したり削除することができます

var images = [ 
 
    "http://ramg1.net/images/3.jpg", 
 
    "https://www.gregbowe.com/assets/img/htmlcert.jpg", 
 
    "http://www.lordlamer.de/wp-content/uploads/2011/02/php-cert.jpg", 
 
    "http://www.michellekeselgiancola.com/images/certs/uploads/phpcert.jpg" 
 
]; 
 

 
var num = 0; 
 

 
function next() { 
 
    var slider = 
 
    document.getElementById("slider"); 
 
    num++; 
 
    if (num >= images.length) { 
 
    num = 0; 
 
    } 
 
    
 
    slider.classList.remove("fade"); 
 
    slider.src = images[num]; 
 
    setTimeout(function(){slider.classList.add("fade");},10); 
 
    //slider.classList.add("fade"); 
 
} 
 

 
function prev() { 
 
    var slider = 
 
    document.getElementById("slider"); 
 
    num--; 
 
    if (num <= 0) { 
 
    num = images.length - 1; 
 
    } 
 
    
 
    slider.classList.remove("fade"); 
 
    slider.src = images[num]; 
 
    setTimeout(function(){slider.classList.add("fade");},10); 
 
    //slider.classList.add("fade"); 
 
}

/* create the fade custom annimation wich set 0 to 1 opacity on an element */ 
 
@-webkit-keyframes fade { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
@-moz-keyframes fade { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
@-o-keyframes fade { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
@keyframes fade { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 

 
/* create the class that trigger the annimation */ 
 
.fade { 
 
    -webkit-animation: fade 2s ease; /* Safari 4+ */ 
 
    -moz-animation: fade 2s ease; /* Fx 5+ */ 
 
    -o-animation:  fade 2s ease; /* Opera 12+ */ 
 
    animation:   fade 2s ease; /* IE 10+, Fx 29+ */ 
 
}

<div id="imageSlider"> 
 

 
    <img id="slider" class="fade" src="http://ramg1.net/images/3.jpg" width="400px" height="80%" /> 
 

 
    <button id="prevBTN" onclick="prev()"> <b>Prev</b> </button> 
 

 
    <button id="nextBTN" onclick="next()"> <b>Next</b> </button> 
 
</div>

Answer 3

は私がチャンスを持っている場合は、このコードをテストし、それが