Cara membuat Slideshow foto sederhana dengan jQuery

Hari ini HHV memandu Anda bagaimana membuat slideshow sederhana dengan jQuery. Bahkan ada banyak cara untuk melakukan foto sileshow dari yang sederhana sampai yang kompleks ... tapi HHV masih menulis terutama karena ini adalah cara yang paling sederhana sildeshow HHV dipelajari dan diterapkan dalam Metro Blogger Template Magazine . Bagian dari pembacaan kode bahwa pemula JS dapat memahaminya, sesuai dengan kriteria "desain web amatir untuk pemula" :)

Live Demo

1. Kode HTML

Untuk mempermudah, insert 3 foto dengan kartu dan dikelilingi dengan

.

Mudah untuk memformat dan menghias kita tambahkan sebuah id=”slideshow” . Akhirnya kami memiliki kode HTML

id="slideshow">
      src="img/img1.jpg" alt="" class="active" />
      src="img/img2.jpg" alt="" />
      src="img/img3.jpg" alt="" />
>

Titik khusus untuk dicatat adalah bahwa jika Anda ingin setiap foto muncul pertama, kemudian ditugaskan ke class=”active”

2. CSS Kode

Data provided by Pastebin.com - Download Raw - See Original

#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;
}

Titik untuk dicatat dalam kode ini adalah ketinggian Slideshow tersebut disesuaikan tergantung pada penempatan kode dan mendalam ... Ketika Anda melihat foto-foto yang kita lihat kode ini juga memberikan koordinat gambar dalam ruang tiga sore ... z-index atribut Foto urutan ditentukan penempatan. Ada tiga kelas, tertinggi aktif (10), lapisan berikutnya aktif (9) dan semua foto yang tersisa (8).

3. JS kode

Sekarang kita mulai menulis sepotong kode untuk mulai bergerak slideshow Anda.

Data provided by Pastebin.com - Download Raw - See Original

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    
    $next.addClass('active');
    $active.removeClass('active');
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Kode di atas memiliki arti sebagai berikut: Pertama, mendeklarasikan variabel, foto active kelas, kemudian menetapkan variabel $active dan kepala, desain foto itu adalah $next variabel . Mulai menjalankan fungsi SlideSwitch. $next foto melekat pada active kelas untuk membawanya ke atas dan gambar yang $active mungkin akan dihapus kelas aktif untuk turun. Akhirnya, waktu antara setiap switch (5 detik) 5000ms. Sangat sederhana!

Biarkan indah menambahkan memudar efek blur.

Data provided by Pastebin.com - Download Raw - See Original

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();
    $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 );
});

Berikut muncul last-active kelas , kelas ini telah dinyatakan dalam kode css dengan hanya satu atribut z-index: 9 .
Kode ini akan ditafsirkan sebagai berikut: file kelas active (di atas) akan ditugaskan ke kelas last-active (turun satu tingkat). The foto di kanan bawah, itu akan ditugaskan ke active kelas (tingkat yang lebih tinggi) dan menambahkan efek untuk animate meningkat opacity dari 0 ke 1. Akhirnya dihapus last-active kelas last-active bergerak gambar pada asli pada saat yang sama turun ke bawah.
Proses ini diulang dengan siklus 5 detik.

Kesimpulan

Seperti disebutkan ada banyak cara untuk Photo Slideshow dengan jQuery lebih kompleks dan jauh lebih indah. Tapi masalahnya adalah bahwa slideshow akan berat dan sulit untuk mengedit lebih banyak disesuaikan. HHV perspektif adalah bagaimana menggunakan cara paling sederhana untuk mencapai efisiensi tertinggi. Untuk mencapai hal ini satu-satunya cara untuk memahami apa yang Anda lakukan.
Mudah-mudahan dengan tutorial ini Anda dapat memahami dan menyesuaikan slideshow Anda inginkan. Contoh ukurannya slideshow, menampilkan waktu dari setiap foto, blur, menambahkan link untuk setiap gambar, dan bahkan menggabungkan dengan widget Recent Posts.
Saya berharap Anda kreativitas dan kesuksesan.

Author : loliktry

Share this

Related Posts