Slide Show dengan Javascript ~ Pemrograman dan Teknologi

Untuk membuat slideshow, kita bisa menggunakan beberapa gambar dan menampilkannya secara bergantian. Kita bisa menggunakan setInterval dan display untuk mengatur kapan tiap gambar ditampilkan. Animation dan transition akan kita perlukan agar ada animasi dan transisi setiap pergantian gambar. Untuk contoh berikut ini, kita akan menggunakan tulisan sebagai ganti dari gambar.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <style>
        @keyframes animasiku{
            from{margin-left:400;}
            to{margin-left:0;}
        }
        
        .slideshow{
            background-color:yellow;
            position:absolute;
            overflow:hidden;
            top:0px;
            left:0px;
            width:400px;
            height:400px;
        }
        
        .gambar{
            position:absolute;
            display:none;
            top:0px;
            left:0px;
            animation:animasiku 3s;
            transition:left 2s;
        }
        
        .transisiku{
          transition: 3s;
          left: -100%;
        }
        
    </style>
</HEAD>
<BODY>
<div class="slideshow">
    <div class="gambar" style="width:400px">
        <h2>Ganti dengan gambar 1</h2>
    </div>
    <div class="gambar" style="width:400px">
        <h2>Ganti dengan gambar 2</h2>
    </div>
    <div class="gambar" style="width:400px">
        <h2>Ganti dengan gambar 3</h2>
    </div>
</div> 
<script>
    var giliran=0;
    var pref=2;
    setInterval(function(event) {
    var gambar = document.getElementsByClassName("gambar");
    var i;
        for (i = 0; i < gambar.length; i++) {
            if(i!=pref)gambar[i].style.display="none";
            gambar[i].classList.remove("transisiku");
        }
        
        gambar[pref].classList.add("transisiku");
        gambar[giliran].style.display="block";
        
        pref=giliran;
        giliran++;
        if(giliran>=3)giliran=0;
    } , 4000);
</script>
</BODY> 
</HTML>

Sekarang kita ubah tulisannya menjadi gambar. Tapi sebelum itu, siapkan tiga gambar dengan nama gambar1.png, gambar2.png, dan gambar3.png. Letakkan tiga gambar itu di folder yang sama dengan kode HTML-nya. Kalau sudah cukup paham, nama tiga gambar itu boleh diganti dengan nama apa saja.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <style>
        @keyframes animasiku{
            from{margin-left:400;}
            to{margin-left:0;}
        }
        
        .slideshow{
            background-color:yellow;
            position:absolute;
            overflow:hidden;
            top:0px;
            left:0px;
            width:400px;
            height:400px;
        }
        
        .gambar{
            position:absolute;
            top:0px;
            left:0px;
            animation:animasiku 3s;
            transition:left 2s;
        }
        
        .transisiku{
          transition: 3s;
          left: -100%;
        }
        
    </style>
</HEAD>
<BODY>
<div class="slideshow">
    <img src="gambar1.png" class="gambar" width="400px">
    <img src="gambar2.png" class="gambar" width="400px">
    <img src="gambar3.png" class="gambar" width="400px">
</div> 
<script>
    var giliran=0;
    var pref=2;
    window.onload=function(){
    setInterval(function(event) {
        var gambar = document.getElementsByClassName("gambar");
        var i;
            for (i = 0; i < gambar.length; i++) {
                if(i!=pref)gambar[i].style.display="none";
                gambar[i].classList.remove("transisiku");
            }
            
            gambar[pref].classList.add("transisiku");
            gambar[giliran].style.display="block";
            
            pref=giliran;
            giliran++;
            if(giliran>=3)giliran=0;
        } , 4000);
    }
</script>
</BODY> 
</HTML>

Selanjutnya, kalian bisa memisahkan kode HTML tersebut menjadi script, CSS, dan kode HTML terpisah. Kalau kalian belum paham caranya, download saja filenya di sini.