Teya Salat

Gambar Slideshow Otomatis

Berikut kami hadirkan buat kamu yang ingin memanjangkan gambar slide, dengan slide akan sangat menghemat ruang, disini kami gunakan Javascript untuk menampilkan gambar slideshow otomatis, ukuran gambar dapat kalian atur besar kecilnya melalui css.


CSS
<style>
.mySlideshow {display:none;}
img.mySlideshow {
width:100%;height:200px}
</style>

HTML
<img class="mySlideshow" src="xtblog.jpg">
  <img class="mySlideshow" src="logo-1.jpg">
  <img class="mySlideshow" src="xtgenerator.png">

SCRIPT
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlideshow");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Ganti gambar setiap 2 detik
}
</script>

Artikel menarik lainnya



Bagikan Ke :