Petunjuk tentang cara membuat slideshow sederhana dengan jQuery

Hari Fatin memandu Anda bagaimana membuat sebuah slideshow sederhana dengan jQuery. Bahkan ada banyak cara untuk melakukan gambar sildeshowdari yang sederhana sampai yang kompleks . Bagian dari itu adalah mudah untuk membaca kode bahwa seseorang tidak tahu apa-apa tentang JS juga bisa memahaminya, konsisten dengan kriteria "desain web amatir untuk pemula" :)

Demo

1. Kode HTML

Untuk mempermudah, foto dengan kartu memasukkan 3 <img> dan mengelilingi dengan kartu<div> . Untuk memudahkan format dan dekorasi melampirkan id=”slideshow” . Akhirnya kita memiliki kode HTML

Data yang diberikan oleh Pastebin.com - Ambil Baku - Lihat Asli

1. <Div id = "slide" >
2.      <Img src = "img/img1.jpg" alt = "" class = "aktif" />
3.      <Img src = "img/img2.jpg" alt = "" />
4.      <Img src = "img/img3.jpg" alt = "" />
5. </ Div >

Sebuah titik khusus yang perlu diperhatikan adalah bahwa jika Anda ingin setiap foto muncul pertama, kemudian ditugaskan ke class=”active”

2. Kode CSS

Data yang diberikan oleh Pastebin.com - Ambil Baku - Lihat Asli

1. # Slideshow {
2.     Posisi : relative ;
3.     height : 350px ;
4. }
6. # Slideshow IMG {
7.     Posisi : absolute ;
8.     top : 0 ;
9.     kiri : 0 ;
10.     z-index : 8 ;
11. }
13. # Slideshow IMG . aktif {
14.     z-index : 10 ;
15. }
17. # Slideshow IMG . terakhir-aktif {
18.     z-index : 9 ;
19. }

Titik untuk dicatat dalam kode ini adalah ketinggian Slideshow disesuaikan tergantung pada lokasi kode dan gambar ... Ketika pertimbangan mendalam kita melihat kode ini juga memberikan koordinat gambar dalam 3-ruang Atribut dimensi ... z-index foto ketentuan penempatan pesanan. Ada 3 kelas, kelas tertinggi - aktif (10), lapisan berikutnya aktif (9) dan semua foto yang tersisa (8).

3. JS Kode

Sekarang kita mulai menulis naskah untuk memulai gerakan slide Anda.

Data yang diberikan oleh Pastebin.com - Ambil Baku - Lihat Asli

1. berfungsi slideSwitch ( ) {
2.     var $ aktif = $ ( '# slideshow IMG.active' ) ;
3.     var $ next = . $ aktif berikutnya ( ) ;    
5.     . $ Berikutnya addClass ( 'aktif' ) ;
7.     . $ Aktif removeClass ( 'aktif' ) ;
8. }
10. $ ( function ( ) {
11.     setInterval ( "slideSwitch ()" , 5000 ) ;
12. } ) ;

Kode di atas memiliki arti sebagai berikut: Pertama, mendeklarasikan variabel, kelas foto yang memiliki active kemudian menetapkan variabel $active dan kepala, itu gambar berikutnya mengubah $next . Mulai menjalankan fungsi SlideSwitch. File $next kelas dipasang active untuk membawanya pada akhir dan tembakan $active akan dihapus ke kelas yang aktif. Akhirnya selang 5000ms (5 detik) antara setiap beralih. Sangat sederhana!

Agar kita untuk membuat lebih indah efek blur memudar.

Data yang diberikan oleh Pastebin.com - Ambil Baku - Lihat Asli

1. berfungsi slideSwitch ( ) {
2.     var $ aktif = $ ( '# slideshow IMG.active' ) ;
3.     var $ next = . $ aktif berikutnya ( ) ;
5.     . $ Aktif addClass ( 'last-aktif' ) ;
7.     . $ Berikutnya css ( { opacity : 0.0 } )
8.         . addClass ( 'aktif' )
9.         . bernyawa ( { opacity : 1.0 } , 1000 , fungsi ( ) {
10.             . $ Aktif removeClass ( 'active lalu-aktif' ) ;
11.         } ) ;
12. }
14. $ ( function ( ) {
15.     setInterval ( "slideSwitch ()" , 5000 ) ;
16. } ) ;

Tampaknya menambahkan kelas  last-active , kelas ini telah dinyatakan dalam kode css dengan hanya satu atribut z-index: 9 .

Kode di atas ditafsirkan sebagai berikut: file kelas telah active (berada di atas) akan ditugaskan ke kelas last-active (1 tingkat ke bawah). File di bawah itu, kelas ditugaskan active(langkah) dan menambahkan efek animate meningkat opacity dari 0 ke 1.Akhirnya menghapus kelas last-active foto yang diambil pada dasar yang sama ke bawah.

Proses ini diulang dengan siklus 5s.

Kesimpulan

Seperti disebutkan ada banyak cara untuk melakukan sebagian besar dengan jQuery Image Slideshow lebih kompleks dan jauh lebih indah. Tapi masalahnya adalah bahwa slide akan berat dan sulit untuk mengedit lebih banyak disesuaikan. Tampilan HHV adalah masih bagaimana menggunakan cara paling sederhana untuk mencapai efisiensi tertinggi . Untuk mencapai tujuan ini adalah satu-satunya cara untuk memahami apa yang Anda lakukan.

Mudah-mudahan dengan tutorial ini anda dapat belajar dan menyesuaikan sesuai dengan slideshow.VD sebagai ukuran slide, waktu tampilan dari setiap gambar, blur, menambahkan link untuk setiap gambar , dan bahkan menggabungkan dengan Recent Posts widget.

Saya berharap Anda sukses kreatif.

Fathin Afif