Advertisement
  1. Code
  2. Web Development

Membangun jQuery Image Scroller

Scroll to top
Read Time: 15 min

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Dalam tutorial ini, kita akan membangun image scroller, menggunakan jQuery's fitur animasi yang sangat baik dan umumnya memiliki beberapa menyenangkan dengan kode. Image scrollers yang tentu tidak baru; Versi mereka keluar sepanjang waktu. Namun banyak dari mereka prakarsa pengguna; berarti bahwa dalam rangka untuk konten yang sedang ditampilkan untuk mengubah, pengunjung harus mengklik tombol atau melakukan beberapa tindakan lainnya. Scroller ini akan berbeda di bahwa itu akan sepenuhnya otonom dan akan mulai scrolling setelah halaman dimuat.


Widget selesai akan benar-benar cross-browser dan melakukan seperti yang diharapkan dalam versi terbaru dari semua browser yang paling umum. Kita juga akan membangun di beberapa interaksi dengan menambahkan kontrol yang memungkinkan pengunjung untuk mengubah arah animasi. Kami akan bekerja dengan hanya jQuery dan sedikit HTML dan CSS dalam tutorial ini dan harus mampu menjalankan contoh tanpa setup server web penuh.


Persiapan

Mari kita membuat halaman HTML dasar pertama-tama; di halaman baru dalam teks editor Tambahkan kode berikut:

Simpan ini sebagai imageScroller.html di dalam folder baru. Kami link ke stylesheet kostum di head halaman, yang kami akan kode dalam beberapa saat, dan kami menyertakan link ke versi host dari rilis terbaru dari jQuery di bagian bawah halaman. Pemuatan skrip pada akhir dari body adalah teknik diakui untuk meningkatkan kinerja halaman Anda dan oleh karena itu dapat dipraktekkan sedapat mungkin.

Widget kami terdiri dari serangkaian bersarang wadah dan sekelompok gambar yang terbungkus link. Gambar ditempatkan di dalam wadah yang hardcoded ke halaman alasan aksesibilitas. Kami tidak akan mengambil gambar dinamis; gambar ditempatkan di widget akan di scroll otomatis (asalkan mereka yang terbungkus link dengan nama class yang sesuai).

Wadah paling luar akan digunakan terutama untuk posisi dan menampilkan tujuan, sementara wadah berikutnya yang dipakai untuk mendekorasi widget dengan gambar latar belakang. Wadah luar ini juga diperlukan untuk menambahkan kontrol untuk sehingga mereka muncul di atas konten dengan benar di IE.

Wadah paling dalam adalah elemen yang akan digunakan untuk melihat gambar-gambar melalui. Elemen ini diberikan class js-disabled yang akan digunakan semata-mata untuk pengunjung yang memiliki JavaScript dinonaktifkan. Kita akan menggunakan class ini untuk mengecilkan masing-masing gambar dengan CSS sehingga mereka semua dapat dilihat.

Gambar yang semua ukuran seragam, dan wadah akan berukuran untuk menampung mereka cukup rapi. Ukuran gambar juga digunakan dalam script yang kami akan menambahkan; Saya akan menyoroti khususnya mana rujukan-rujukan ini terjadi tetapi Anda harus menyadari bahwa jika Anda ingin menggunakan gambar dari ukuran yang berbeda, script dan ukuran wadah akan perlu disesuaikan dengan sesuai.


Styling Widget

Setelah link ke jQuery, kita memiliki elemen script kustom dengan cara pintas document.ready jQuery, menunggu kita untuk menambahkan kode yang akan membawa widget hidup. Sebelum kita melakukannya Namun, mari kita tambahkan CSS dengan cepat. Dalam file baru yang lain di editor teks Anda, tambahkan berikut selector dan aturan style:

Jika JavaScript dinonaktifkan, dan ketika halaman sedang loading, Semua gambar akan dapat dilihat

Simpan ini sebagai imageScroller.css dalam folder yang sama sebagai halaman web. Pertama kita memiliki class selector yang menargetkan class js-disabled kami; dengan aturan-aturan ini kita hanya ukuran gambar sehingga mereka cukup kecil untuk menumpuk di samping satu sama lain sepanjang lebar widget. Jika JavaScript dinonaktifkan, dan ketika halaman sedang loading, Semua gambar akan dapat dilihat-sangat cepat dan fallback mudah, tapi satu yang tidak selalu fool-proff dan tentu tidak lengkap peningkatan progresif. Nilai-nilai yang ditetapkan untuk lebar dan tinggi akan perlu bervariasi tergantung pada jumlah gambar dalam viewer.

Berikut ini kami memiliki selector dan aturan style widget dan membuatnya berfungsi dengan benar. Sebagian besar kode di sini adalah semata-mata untuk tujuan tampilan, gambar latar belakang, warna, dll. Aturan yang penting, yang implementasi bersandar untuk berfungsi dengan benar, adalah pengaturan overflow: hidden pada inner viewer container. Ini akan menyembunyikan gambar yang belum ditampilkan dan gambar yang telah melewati viewer. Pada tahap ini ketika kita menjalankan halaman, kita harus melihat sesuatu seperti ini:

Finished ProductFinished ProductFinished Product

Beberapa CSS yang kita akan ditetapkan dalam JavaScript di sesaat, dan beberapa unsur-unsur yang kami menargetkan CSS tidak ada lagi, tapi ini adalah segalanya yang perlu untuk pergi ke CSS file.


Membawa Widget menjadi hidup

Di tahap akhir dari tutorial ini kita akan menambahkan jQuery-flavored JavaScript yang akan membuat widget bekerja dan menciptakan perilaku yang kita inginkan. Dalam fungsi anonim kosong di bagian bawah halaman HTML Tambahkan kode berikut:

Pertama-tama kami menghapus class js-disabled dari wadah viewer. Selanjutnya kita membuat wadah baru untuk menahan semua gambar yang ditemukan dalam widget. Alasan utama untuk ini adalah sehingga bukan menghidupkan setiap gambar secara individual, mengakibatkan sejumlah besar berpotensi animasi yang berjalan secara bersamaan, kita hanya perlu menghidupkan satu elemen-wadah yang kami menciptakan sekarang.

Lebar wadah baru diatur untuk jumlah gambar dikalikan dengan lebar masing-masing gambar, yang dalam contoh ini adalah 170 piksel. Ini adalah salah satu potongan kode yang saya katakan sebelumnya akan secara khusus menyebutkan, dan adalah sesuatu yang perlu diubah jika kita memutuskan untuk menggunakan gambar dari ukuran yang berbeda. Ketinggian wadah juga secara khusus diatur untuk ketinggian masing-masing gambar.

Hal ini berguna kemudian dalam script untuk mengetahui hal-hal tertentu tentang sifat animasi, seperti kecepatan, durasi akan berlangsung dan arah perjalanan, jadi kita selanjutnya menetapkan serangkaian variabel untuk menyimpan informasi ini di. Durasi akan sama dengan tepat satu detik per gambar, dan sekali lagi didasarkan pada jumlah gambar yang ditemukan dalam widget.

Kecepatan mudah untuk bekerja tahu, sedang jarak perjalanan dibagi dengan durasi perjalanan. Untuk referensi, dalam contoh ini tepat kecepatan dari animasi akan 0.274 piksel-per-milidetik. Variabel akhir, arah, adalah sebuah string sederhana yang menunjukkan bahwa animasi akan melanjutkan dari kanan-ke-kiri, meskipun kita bisa dengan mudah mengubahnya ke ltr jika kita ingin.

Akhirnya, kami menetapkan posisi awal ke wadah baru; karena animasi saat ini diatur ke rtl, kita perlu untuk posisi gambar baru wadah sehingga tepi kiri diatur ke ujung kanan viewer. Jika kita mengatur animasi untuk ltr Namun, tepi kanan elemen akan selaras dengan kontainernya tepi kiri. Kita menentukan arah menggunakan JavaScript ternary bersyarat. Serta posisi, kami juga memberikan wadah baru nama class pencocokan arah, yang kita dapat menguji untuk di titik berbeda dalam script.

Selanjutnya, kita akan perlu mendefinisikan fungsi baru untuk memulai dan mengabadikan animasi. Ada beberapa waktu yang berbeda selama eksekusi normal script yang kita harus mulai hidup, sehingga membungkus fungsi ini dalam fungsi yang kita dapat dipangil ketika kita perlu membantu untuk mengurangi jumlah kode. Tambahkan kode berikut:

Fungsi animator menerima tiga argumen; elemen untuk dianimasi, panjang waktu yang animasi harus menjalankan untuk, dan arah di mana elemen harus animasi. Fungsi dipecah menjadi dua blok yang berbeda, satu untuk animasi rtl, dan yang lainnya untuk ltr.

Dalam setiap blok bersyarat kami memperbarui nama class wadah gambar untuk mencerminkan arah saat ini hanya dalam kasus arah telah berubah (ini adalah salah satu interaksi pengunjung dimulai).

Kita kemudian mendefinisikan animasi, menggerakan wadah gambar plus untuk ltr atau minus untuk rtl lebar gambar wadah, memberikan kesan Geser melintasi penampil. Sayangnya kita tidak bisa menggunakan built in animasi slow, normal, atau faset, karena bahkan lambat pengaturan limit animasi untuk total waktu hanya 600 milidetik, yang merupakan cara berjalan terlalu cepat untuk bahkan jumlah kecil gambar kami menggunakan dalam contoh ini.

Kita menetapkan string linier sebagai argumen ketiga metode anime yang meredakan fungsi untuk menggunakan dan set animasi untuk melanjutkan dengan kecepatan yang seragam dari awal sampai akhir; Jika kita tidak menyetel ini, animasi akan terasa mempercepat dan memperlambat di awal dan akhir animasi masing-masing.

Akhirnya kita menambahkan fungsi anonim callback yang akan dilaksanakan segera setelah animasi berakhir; dalam fungsi callback ini, kita mengembalikan wadah gambar ke posisi awal, secara rekursif memanggil fungsi animator lagi melewati dalam pengaturan yang benar yang tergantung pada cabang bergantung sedang dijalankan, dan menyembunyikan panel kontrol jika terlihat. Kami belum menambahkan kode yang akan membuat panel kontrol, tapi kita masih perlu menambahkan kode ini di sini untuk ketika kita memiliki.

Untuk memulai animasi ketika halaman diload kita sekarang perlu memanggil fungsi yang kita sudah hanya didefinisikan; Tambahkan panggilan fungsi berikut:

Semua yang kita lakukan adalah panggilan yand dimasukan fungsi pada elemen untuk menghidupkan dan variabel yang kami set di bagian pertama dari kode. Jika kita menjalankan halaman sekarang, kita harus menemukan bahwa animasi dimulai segera setelah halaman telah dimuat dan terus tanpa batas, seperti ditunjukkan (jenis) pada screenshot berikut:

Finished ProductFinished ProductFinished Product

Menambahkan beberapa interaksi

Kita sekarang berada pada tahap di mana kita memiliki fungsionalitas inti widget dan dapat mulai menambahkan interaktivitas tambahan yang akan membuatnya terlibat. Setelah panggilan untuk animator fungsi Tambahkan kode berikut:

seperti yang ditunjukan komenter, penangan event ini akan berhenti animasi ketika pengunjung Taruh kursor pada salah satu gambar dalam widget.

Kami menggunakan metode live jQuery (baru untuk 1.3!) untuk melampirkan handler untuk unsur-unsur dan menentukan fungsi anonim akan dieksekusi ketika event terjadi.

Dalam fungsi ini kita pertama menberhentikan animasi menggunakan jQuery metode stio, memasukan dalam true nilai Boolean sebagai argumen. Argumen ini akan membatalkan antrian animasi jika ada; itu tidak boleh dilakukan, seperti hanya pernah harus ada satu animasi pada satu waktu, tapi sangat berguna untuk menggunakan argumen ini hanya dalam kasus.

Kami memeriksa apakah panel kontrol sudah ada dan disediakan jika belum kami membuat baru div elemen, memberikan id sehingga mengambil aturan style kami dan menambahkan itu wadah luar. Kami kemudian menggunakan jQuery's css metode untuk mengatur opacity dalam mode cross-browser untuk menghindari keharusan untuk menargetkan browser yang berbeda dengan CSS kami dan geser kontrol turun ke tempatnya.

Kami juga membuat beberapa link dan menambahkan mereka ke panel kontrol; link ini akan bertindak sebagai tombol yang memungkinkan pengunjung untuk mengubah arah gambar yang bergerak. Kami akan menambahkan penangan untuk tombol sebentar lagi. Akhirnya, kami mendapatkan isi dari atribut judul link pembungkus yang memicu event mouseover dan membuat elemen paragpraf baru dengan teks dalam menetapkan judul. Kami sangat mengandalkan shortcut bersyarat ternay JavaScript di bagian kode karena menyediakan mekanisme sempurna untuk hanya membuat dan menambahkan elemen jika mereka sudah tidak ada.

Anda mungkin juga telah memperhatikan bahwa kita menetapkan variabel terus isi dari atribut judul memicu saat ini, Anda mungkin bertanya-tanya mengapa kita tidak menggunakan kode berikut sebaliknya:

Alasan untuk ini adalah sehingga tidak ada ambiguitas untuk mengacu pada apa $(this). Menggunakan kode di atas bekerja, tetapi itu melempar kesalahan yang sementara non-fatal, masih tidak yang meyakinkan untuk pengguna potensial widget. Menggunakan variabel hanya memastikan kesalahan ini dihindari. Panel kontrol, ketika terlihat, muncul dalam screenshot berikut:

Finished ProductFinished ProductFinished Product

Mengikuti mouseover animasi akan berhenti; kita dapat mulai lagi dengan mudah menggunakan mouseout event handler, yang kita harus tambahkan berikutnya:

Sekali lagi kami menggunakan jQuery's live metode, tetapi kali ini, kita juga memasukan objek event mentah ke fungsi anonim callback kita. Kami membuat penggunaan obyek ini langsung untuk melihat apakah pointer pindah ke panel kontrol. Jika belum, kita menyembunyikan kontrol, tetapi jika tidak, kita tidak melakukan apa pun dan lanjutkan dengan restart animasi. Perhatikan bagaimana kami menggunakan bersarang ternay yang setara dengan if else bersyarat.

Tujuan utama dari fungsi anonim adalah untuk me-restart animasi, tetapi sebelum kita dapat melakukan itu kita perlu bekerja keluar durasi animasi; kita tidak bisa hardcode nilai karena wadah gambar akan pindah. Masa awal ditetapkan untuk 1 detik untuk setiap gambar, dalam contoh ini 5 detik. Jika ada hanya satu gambar kiri terlihat dalam viewer dan kita mengatur animasi untuk 5 detik lagi, animasi akan melanjutkan menjadi lebih lambat.

Kami pertama kali bekerja tahu apa jarak total wadah gambar perjalanan penuh animasi. Kami kemudian bekerja keluar berapa banyak dari jarak penuh adalah masih akan ditempuh. Kita akan perlu untuk melakukan perhitungan yang berbeda tergantung pada apakah animasi yang terjadi dari kiri ke kanan atau sebaliknya, sehingga kita lagi membuat penggunaan bersyarat ternary.

Jika animasi yang terjadi dari kiri ke kanan, kaki kiri untuk perjalanan adalah atribut style kiri gambar wadah (diperoleh dengan menggunakan metode jQuery css) ditambahkan ke lebar gambar wadah, dikurangi dari jarak total. Jika wadah gambar bergerak dari hak untuk meninggalkan Namun, jarak yang tersisa untuk perjalanan adalah lebar wadah gambar minus atribut style kiri, dikurangi dari jarak total. Metode jQuery lebar dan css mengembalikan nilai-nilai string, jadi kami menggunakan JavaScript's parseInt fungsi untuk mengubahnya ke nilai-nilai numerik.

Durasi animasi baru kemudian dihitung dengan membagi jarak yang tersisa untuk melakukan perjalanan dengan kecepatan yang kita bekerja dengan benar pada awal kode. Setelah kita memiliki angka ini, kita kemudian dapat memanggil fungsi animator lagi melewati dalam parameter yang diperlukan, membuat animasi mulai lagi dari mana itu berhenti, dalam arah yang sama perjalanan.


Mengubah arah

Untuk bagian akhir dari script kami, kita dapat menambahkan penangan untuk link di panel kontrol yang digunakan untuk mengubah arah animasi. Langsung setelah kode kami dit tambahkan, masukkan kode berikut:

Fungsi ini, yang dipicu ketika kiri ke kanan tombol diklik, relatif sederhana dan berisi kode yang sangat mirip dengan apa yang kita telah sudah digunakan; kami pertama berhenti animasi saat ini (itu akan melanjutkan kembali ketika pengunjung bergerak pointer di atas panel kontrol), dan kemudian menukar nama class sehingga cocok dengan arah baru perjalanan. Kami kemudian bekerja keluar durasi animasi baru dengan cara yang sama bahwa kita lakukan sebelumnya, sebelum akhirnya memanggil fungsi animator kami sekali lagi. Ini adalah hanya handler untuk tombol ltr; handler untuk tombol rtl hampir identik, tetapi menggunakan perhitungan yang benar untuk arah yang berlawanan dari perjalanan:

Ini adalah sekarang semua kode kita perlu untuk menulis, jika Anda menjalankan halaman dalam browser pada titik ini, Anda harus menemukan bahwa widget bekerja sebagaimana dimaksud.


Ringkasan

Dalam tutorial ini kami buat yang menyenangkan dan interaktif widget untuk menampilkan serangkaian gambar dan dapat digunakan untuk menampilkan logo produsen produk yang Anda Jual, atau logo dari perangkat lunak yang Anda merekomendasikan, atau apa pun yang Anda sukai. Kami fokus terutama pada aspek animasi dan interaksi widget, tetapi juga dengan hal-hal seperti menyediakan dasar fallback jika JavaScript dinonaktifkan di browser.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.