INDONESIANWARE - Pada Artikel yang anda baca kali ini dengan judul Cara Mudah Buat Simple SlideShow Menggunakan Jquery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel CSS, Artikel JQUERY, Artikel OPINI, Artikel PEMROGRAMAN WEB, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Mudah Buat Simple SlideShow Menggunakan Jquery
link : Cara Mudah Buat Simple SlideShow Menggunakan Jquery

Cara Mudah Buat Simple SlideShow Menggunakan Jquery

Saya coba mencari plugin jquery melalui mbah google cara mudah buat simple slide show menggunakan jquery tapi saya belum ketemu juga plugin slide yang simple dan mudah di modifikasi, nah ga tahu kenapa saya nyasar di situs ini http://jonraasch.com/blog/a-simple-jquery-slideshow ketika lihat scriptnya sangat simple dan mudah di pahami, kali ini saya coba share ke teman-teman cara mudah buat simple slide show menggunakan jquery 

1. Buatlah halaman html dan anggaplah kamu sudah memiliki gambar img1, img2, dan img, coba lihat script html di bawah ini

Penjelasan Script diatas :

Gambar di wrap atau dibungkus dengan css ID nama “slideshow” dan css class “active” merupakan pengenal untuk gambar yang akan active dan tampil

2. Kemudian jika sudah membuat image seperti html diatas jangan lupa untuk menambahkan script css pada tag sebelum </head> kira-kira seperti ini

#slideshow {
   	 position:relative;
    	height:350px;
}

#slideshow img {
   	 position:absolute;
   	 top:0;
   	 left:0;
   	 z-index:8;
}

#slideshow img.active {
   z-index:10;
}

#slideshow img.last-active {
   	 z-index:9;
}

Penjelas script css diatas :

Id slideshow dibuat positionnya relative agar setiap position absolute di dalamnya mengacu pada #slideshow, #slideshow img dibuat positionnya absolute, artinya posisi gambar akan menumpuk keatas dengan nilai tumpukan ke-8, sedangkan #slideshow img.active akan berada paling atas karena nilai z-index/ tumpukannya bernilai 10, sedangkan #slideshow img.last-active akan berada diantaranya yaitu tumpukan ke-9.

3. untuk membuatnya berjalan dengan baik, maka di perlukan sebuah fungsi yang akan kita buat dengan jquery seperti di bawah ini :

function slideSwitch() {
    var $active = $('#slideshow img.active');

    if ( $active.length == 0 ) $active = $('#slideshow img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow img:first');

    $active.addClass('last-active');
        
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
	}

	$(function() {
		setInterval( "slideSwitch()", 5000 );
	});

Penjelasan Script :

 a. buat sebuah fungsi javascript dengan nama fungsi slideSwitch(), dimana fungsi ini akan membuat sebuah perintah jika di panggil, adapun penjelasnnya

var $active = $('#slideshow img.active'); =

merupakan variable dengan nama variable active yang nilainya adalah gambar yang berada didalam #slideshow dengan class active.

if ( $active.length == 0 ) $active = $('#slideshow img:last');

merupakan kondisi jika tidak ditemukan variable active maka gambar adalah gambar terakhir.

var $next =  $active.next().length ? $active.next() : $('#slideshow img:first');

Merupakan kondisi dimana nilai variable next merupakan gambar selanjutnya yang active jika tidak variable next merupakan gambar yang pertama.

$active.addClass('last-active');

Merupakan perintah jquery untuk menambahkan class baru dengan nama class “last-active”

$next.css({opacity: 0.0})

        .addClass('active')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active last-active');

        });

Merupakan variable next dimana akan ditambahkan perintah untuk menambahkan nilai css dengan nilai opacity:0, dan menambahkan class active dan buat perubahan secara animate dengan opacity:1 dan lakukan perubahan selama satu detik dan saat perubahan terjadi variable $active akan dapate perintah untuk menghapus nama class active dan last-active.

$(function() {

    setInterval( "slideSwitch()", 5000 );

});

Merupakan fungsi yang memerintahkan untuk menjalankan fungsi slideswitch() dengan interval waktu 5 detik

Kira-kira berikut ini full scriptnya,  dan jangan lupa untuk menambahkan library  jquerynya ya

Kamu bisa download filenya disini, atau kamu buat sesuai dengan tutorial diatas simpan filenya terserah dengan nama yang kamu suka, kemudian simpan dengan format html contoh index.html, kemudian jalankan dengan browser dan lihat apa yang terjadi sekarang kamu sudah paham kan cara buat simple slideshow dengan jquery. Sampai jumpa di tutorial berikutnya

sumber : http://jonraasch.com/blog/a-simple-jquery-slideshow

Sekianlah artikel Cara Mudah Buat Simple SlideShow Menggunakan Jquery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mudah Buat Simple SlideShow Menggunakan Jquery dengan alamat link https://ware-id.blogspot.com/2013/12/cara-mudah-buat-simple-slideshow.html