[trick] Membuat Slide Show Fade in dan Fade Out dengan Javascript dan css

<style>
#ss{
opacity:0;
-webkit-transition:opacity 1.0s linear 0s;
transition:opacity 1.0s linear 0s;
}
</style>

<script>

var ss_i = 0;
var ss_array = ['1.jpg','2.jpg','3.jpg','4.jpg'];

function ssNext(){

ss_element.style.opacity = 0;
if(ss_i > (ss_array.length - 2)){
ss_i = 0;
}
ss_element.innerHTML = '<img src="'+ss_array[ss_i]+'" width=100>';
ss_i++;

setTimeout('ssSlide()',1000);
}
function ssSlide(){
ss_element.innerHTML = '<img src="'+ss_array[ss_i]+'" width=100>';
ss_element.style.opacity = 1;
setTimeout('ssNext()',2000);
}
</script>

<div id="ss"></div>
<script>var ss_element = document.getElementById("ss"); ssSlide(); </script>

Posted by Muhammad Rifqi on 15/04/2015

https://topidesta.wordpress.com/2015/04/15/membuat-slide-show-fade-in-dan-fade-out-dengan-javascript/