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" :)
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
Titik khusus untuk dicatat adalah bahwa jika Anda ingin setiap foto muncul pertama, kemudian ditugaskan ke
class=”active”
2. CSS Kode
#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.
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.
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.
Itu adalah fakta. Ada banyak dokumen di internet tetapi sebagian besar tidak berguna, hal-hal yang berguna jarang. Jika Anda ingin hal yang harus berlaku, mereka harus mengeluarkan uang untuk mendapatkan apa yang Anda inginkan. Eropa juga hasil yang adil.