Tayangan slaid yang besar dan menakjubkan menggunakan teknologi jQuery.
2. pemalam jQuery "Karusel Skala"
Tayangan slaid boleh skala menggunakan jQuery. Anda boleh menetapkan saiz tayangan slaid yang paling sesuai dengan anda.
3. pemalam jQuery "slideJS"
Gelangsar imej dengan penerangan teks.
4. Pemalam "JSliderNews"
Apabila anda menuding pada anak panah navigasi, lakaran kecil bulat bagi slaid seterusnya muncul.
6. Peluncur "Kitaran Persembahan" jQuery yang bagus
peluncur jQuery dengan penunjuk pemuatan imej. Penukaran slaid automatik disediakan.
7. pemalam jQuery "Parallax Slider"
Peluncur dengan kesan latar belakang volumetrik. Kemuncak peluncur ini ialah pergerakan latar belakang, yang terdiri daripada beberapa lapisan, setiap satunya menatal pada kelajuan yang berbeza. Hasilnya ialah tiruan kesan volumetrik. Nampak sangat cantik, boleh tengok sendiri. Kesannya dipaparkan dengan lebih lancar dalam pelayar seperti Opera, Google Chrome, IE.
8. Peluncur jQuery yang segar dan ringan “bxSlider 3.0”
Pada halaman demo dalam bahagian "contoh" anda boleh menemui pautan kepada semua kemungkinan penggunaan pemalam ini.
9. peluncur imej jQuery, pemalam "slideJS".
Gelangsar jQuery yang bergaya pastinya boleh menghiasi projek anda.
10. pemalam tayangan slaid jQuery "Slaid Mudah" v1.1
Pemalam jQuery yang mudah digunakan untuk membuat tayangan slaid.
11. pemalam jQuery Slidy
Pemalam jQuery ringan dalam pelbagai versi. Penukaran slaid automatik disediakan.
12. Galeri CSS jQuery dengan perubahan slaid automatik
Jika pelawat tidak mengklik pada anak panah "Maju" atau "Kembali" dalam masa tertentu, galeri akan mula menatal secara automatik.
13. peluncur jQuery "Peluncur Nivo"
Pemalam yang sangat profesional, berkualiti tinggi, ringan dengan kod yang sah. Terdapat banyak kesan peralihan slaid yang berbeza tersedia.
14. peluncur jQuery "MobilySlider"
Gelangsar segar. Gelangsar jQuery dengan pelbagai kesan perubahan imej.
15. Pemalam jQuery “Slider²”
Peluncur ringan dengan penukar slaid automatik.
16. Gelangsar javascript segar
Slider dengan perubahan imej automatik.
Pemalam untuk melaksanakan persembahan slaid dengan perubahan slaid automatik. Ia adalah mungkin untuk mengawal paparan menggunakan lakaran kecil imej.
Peluncur imej CSS jQuery menggunakan pemalam NivoSlider.
19. peluncur jQuery "jShowOff"
Pemalam untuk penggiliran kandungan. Tiga pilihan untuk digunakan: tanpa navigasi (dengan perubahan automatik dalam format persembahan slaid), dengan navigasi dalam bentuk butang, dengan navigasi dalam bentuk lakaran kecil imej.
20. Pemalam "Shutter Effect Portfolio".
Plugin jQuery segar untuk mereka bentuk portfolio jurugambar. Galeri mempunyai kesan menarik untuk menukar imej. Foto mengikut satu sama lain dengan kesan yang serupa dengan pengendalian pengatup kanta.
21. Peluncur CSS javascript ringan "TinySlider 2"
Pelaksanaan peluncur imej menggunakan javascript dan CSS.
22. Gelangsar hebat "Tinycircleslider"
Gelangsar bulat yang bergaya. Peralihan antara imej dijalankan dengan menyeret peluncur dalam bentuk bulatan merah di sekeliling lilitan. Ia akan sesuai dengan sempurna ke dalam laman web anda jika anda menggunakan elemen bulat dalam reka bentuk anda.
23. Peluncur imej dengan jQuery
Gelangsar ringan "Kit Gelangsar". Gelangsar tersedia dalam reka bentuk yang berbeza: menegak dan mendatar. Pelbagai jenis navigasi antara imej juga dilaksanakan: menggunakan butang "Maju" dan "Kembali", menggunakan roda tetikus, menggunakan klik tetikus pada slaid.
24. Galeri dengan miniatur "Slider Kit"
Galeri "Kit Gelangsar". Penatalan lakaran kecil dijalankan secara menegak dan mendatar. Peralihan antara imej dijalankan menggunakan: roda tetikus, klik tetikus atau menuding kursor di atas lakaran kecil.
25. Peluncur kandungan jQuery "Kit Peluncur"
Peluncur kandungan menegak dan mendatar menggunakan jQuery.
26. tayangan slaid jQuery "Kit Gelangsar"
Tayangan slaid dengan perubahan slaid automatik.
27. Peluncur CSS3 javascript profesional ringan
Peluncur jQuery dan CSS3 yang kemas dicipta pada tahun 2011.
tayangan slaid jQuery dengan lakaran kenit.
29. Tayangan slaid jQuery yang mudah
Tayangan slaid dengan butang navigasi.
30. Tayangan Slaid "Skitter" jQuery yang mengagumkan
plugin jQuery Skitter untuk mencipta tayangan slaid yang menakjubkan. Pemalam ini menyokong 22 (!) jenis kesan animasi yang berbeza apabila menukar imej. Boleh bekerja dengan dua pilihan navigasi slaid: menggunakan nombor slaid dan menggunakan lakaran kecil. Pastikan anda menonton demo, penemuan berkualiti tinggi. Teknologi yang digunakan: CSS, HTML, jQuery, PHP.
31. Tayangan slaid "Janggal"
Tayangan slaid berfungsi. Slaid boleh menjadi: imej ringkas, imej dengan kapsyen, imej dengan petua alat, video. Anda boleh menggunakan anak panah, pautan nombor slaid dan kekunci kiri/kanan pada papan kekunci anda untuk menavigasi. Tayangan slaid datang dalam beberapa versi: dengan dan tanpa lakaran kecil. Untuk melihat semua pilihan, ikut pautan Demo #1 - Demo #6 yang terletak di bahagian atas halaman demo.
Reka bentuk yang sangat asli untuk peluncur imej, mengingatkan kepada kipas. Peralihan slaid animasi. Navigasi antara imej dijalankan menggunakan anak panah. Terdapat juga anjakan automatik yang boleh dihidupkan dan dimatikan menggunakan butang Main/Jeda yang terletak di bahagian atas.
Gelangsar jQuery animasi. Imej latar belakang berskala secara automatik apabila tetingkap penyemak imbas diubah saiznya. Untuk setiap imej, blok dengan penerangan muncul.
34. Gelangsar "Flux Slider" menggunakan jQuery dan CSS3
Peluncur jQuery baharu. Beberapa kesan animasi yang menarik apabila menukar slaid.
35. pemalam jQuery “jSwitch”
Galeri jQuery animasi.
Tayangan slaid jQuery yang mudah dengan perubahan slaid automatik.
37. Versi baharu pemalam “SlideDeck 1.2.2”
Peluncur kandungan profesional. Terdapat pilihan dengan perubahan slaid automatik, serta pilihan menggunakan roda tetikus untuk bergerak antara slaid.
38. peluncur jQuery "Peluncur Sudo"
Peluncur imej ringan menggunakan jQuery. Terdapat banyak pilihan pelaksanaan: menukar imej mendatar dan menegak, dengan dan tanpa pautan ke nombor slaid, dengan dan tanpa kapsyen imej, pelbagai kesan perubahan imej. Terdapat fungsi perubahan slaid automatik. Pautan kepada semua contoh pelaksanaan boleh didapati di halaman demo.
39. tayangan slaid CSS3 jQuery
Tayangan slaid dengan lakaran kecil menyokong mod penukaran slaid automatik.
40. peluncur jQuery "Peluncur Fluks"
Slider dengan banyak kesan menukar imej.
41. Peluncur jQuery mudah
Peluncur imej bergaya menggunakan jQuery.
42. Tayangan slaid jQuery “Craftyslide”.
tayangan slaid HTML5 jQuery yang merentangi seluruh lebar skrin dengan bunyi.
Tayangan slaid jQuery yang mudah.
Jika anda perlu menambah peluncur imej jQuery berkualiti tinggi ke tapak anda, maka dalam artikel ini anda akan menemui penerangan tentang pemalam yang diperlukan. Walaupun JQuery telah menjadikan kerja dengan JavaScript lebih mudah, kami masih memerlukan pemalam untuk mempercepatkan proses reka bentuk web.
Kami boleh membuat perubahan pada beberapa pemalam ini dan mencipta peluncur baharu yang lebih sesuai untuk tujuan tapak kami.
Untuk peluncur lain, anda hanya menambah tajuk, imej dan pilih kesan peralihan slaid yang disertakan dengan peluncur. Semua pemalam ini disertakan dengan dokumentasi terperinci, jadi menambah kesan atau fungsi baharu padanya tidak sukar. Anda juga boleh menukar pencetus berasaskan peristiwa jika anda seorang pengaturcara JQuery yang berpengalaman.
Trend terkini seperti reka bentuk responsif adalah sangat penting untuk projek web, sama ada anda melaksanakan pemalam atau skrip. Semua elemen ini menjadikan setiap pemalam ini sangat fleksibel. Semua yang keluar pada tahun 2014 termasuk dalam senarai ini.
Slider imej JQuery Jssor Slider ResponsifSaya baru-baru ini menjumpai peluncur JQuery yang berkuasa ini dan dapat melihat secara langsung bahawa ia melakukan tugasnya dengan baik. Ia mengandungi kemungkinan tanpa had yang boleh dikembangkan melalui kod sumber terbuka peluncur:
- Reka bentuk penyesuaian;
- Lebih daripada 15 pilihan penyesuaian;
- Lebih daripada 15 kesan menukar imej;
- Galeri imej, karusel, sokongan saiz skrin penuh;
- Pemutar sepanduk menegak, senarai slaid;
- Sokongan video.
Demo | Muat turun
PgwSlider - peluncur responsif berdasarkan JQuery / ZeptoSatu-satunya tugas pemalam ini adalah untuk menunjukkan slaid imej. Ia sangat padat, kerana fail JQuery hanya bersaiz 2.5 KB, yang membolehkan ia dimuatkan dengan cepat:
- Susun atur penyesuaian;
- pengoptimuman SEO;
- Sokongan untuk pelayar yang berbeza;
- Peralihan imej mudah;
- Saiz arkib hanya 2.5 KB.
Demo | Muat turun
Peluncur JQuery yang fleksibel dan berguna direka untuk sumber berita dengan senarai penerbitan di sebelah kiri dan imej dipaparkan di sebelah kanan:
- Reka bentuk penyesuaian;
- Lajur menegak untuk menukar berita;
- Pengepala dikembangkan.
Demo | Muat turun
Gelangsar ini tidak mengandungi jQuery, tetapi saya ingin membentangkannya kerana ia sangat padat dan boleh mengurangkan masa memuatkan halaman dengan ketara. Beritahu saya jika anda menyukainya:
- Susun atur penyesuaian;
- Reka bentuk ringkas;
- Pelbagai pilihan menukar slaid;
- Kod JavaScript minimum;
- Saiznya hanya 3KB.
Demo | Muat turun
Galeri gaya bertaburan dokumen di atas meja dengan susun atur yang fleksibel dan reka bentuk yang cantik harus menarik minat ramai daripada anda. Lebih sesuai untuk tablet dan paparan besar:
- Gelangsar penyesuaian;
- Reka bentuk rata;
- Perubahan slaid rawak;
- Akses penuh kepada kod sumber.
Demo | Muat turun
Demo | Muat turun
HiSlider telah memperkenalkan pemalam gelangsar jQuery percuma baharu yang dengannya anda boleh membuat pelbagai galeri imej dengan peralihan yang hebat:
- Gelangsar penyesuaian;
- Tidak memerlukan pengetahuan pengaturcaraan;
- Beberapa templat dan kulit yang menakjubkan;
- Kesan peralihan yang indah;
- Sokongan untuk platform yang berbeza;
- Serasi dengan WordPress, Joomla, Drupal;
- Keupayaan untuk memaparkan pelbagai jenis kandungan: imej, video YouTube dan video Vimeo;
- Persediaan fleksibel;
- Ciri tambahan yang berguna;
- Jumlah kandungan yang tidak terhad dipaparkan.
Demo |Muat turun
WOW Slider ialah peluncur imej jQuery responsif dengan kesan visual yang menakjubkan (domino, putar, kabur, flip dan kilat, terbang keluar, tirai) dan templat profesional.
WOW Slider dilengkapi dengan wizard pemasangan yang membolehkan anda membuat slider hebat dalam beberapa saat tanpa perlu memahami kod atau mengedit imej. Versi pemalam untuk Joomla dan WordPress juga tersedia untuk dimuat turun:
- Responsif sepenuhnya;
- Menyokong semua pelayar dan semua jenis peranti;
- Sokongan untuk peranti sentuh;
- Pemasangan mudah pada WordPress;
- Fleksibiliti dalam konfigurasi;
- dioptimumkan SEO.
Demo |Muat turun
Nivo Slider dikenali di seluruh dunia sebagai slider imej yang paling cantik dan mudah digunakan. Pemalam Nivo Slider adalah percuma dan dikeluarkan di bawah lesen MIT:
- Memerlukan JQuery 1.7 dan ke atas;
- Kesan peralihan yang indah;
- Mudah dan fleksibel untuk dikonfigurasikan;
- Padat dan menyesuaikan diri;
- Sumber terbuka;
- Berkuasa dan mudah;
- Beberapa templat berbeza;
- Pemotongan imej automatik.
Demo |Muat turun
Idea ini diilhamkan oleh peluncur Apple, di mana beberapa elemen kecil boleh terbang keluar dengan kesan animasi yang berbeza. Pembangun cuba melaksanakan konsep ini, dengan mengambil kira keperluan minimum untuk mencipta reka bentuk kedai dalam talian yang mudah, di mana elemen "terbang" mewakili kategori yang berbeza:
- Susun atur penyesuaian;
- Reka bentuk minimalis;
- Pelbagai kesan keciciran dan perubahan slaid.
Demo |Muat turun
Peluncur yang sangat mudah yang menduduki 100% lebar halaman dan menyesuaikan diri dengan saiz skrin peranti mudah alih. Ia berfungsi dengan peralihan CSS, dan imej "bertindan" bersama dengan sauh. Penambat boleh diganti atau dialih keluar jika anda tidak mahu melampirkan pautan pada imej.
Apabila dipasang, gelangsar mengembang kepada 100% daripada lebar skrin. Ia juga boleh mengurangkan saiz imej slaid secara automatik:
- Gelangsar JQuery Adaptif;
- Saiz penuh;
- Reka bentuk minimalis.
Demo |Muat turun
Peluncur Kandungan Elastik secara automatik melaraskan lebar dan ketinggian berdasarkan dimensi elemen induk. Ini adalah peluncur jQuery yang mudah. Ia terdiri daripada kawasan slaid di bahagian atas dan bar tab navigasi di bahagian bawah. Gelangsar melaraskan lebar dan ketinggiannya mengikut dimensi bekas induk.
Apabila dilihat pada skrin pepenjuru kecil, tab navigasi bertukar menjadi ikon kecil:
- Reka bentuk penyesuaian;
- Menatal klik tetikus.
Demo |Muat turun
Gelangsar percubaan yang menatal imej dalam 3D. Kedua-dua tindanan itu menyerupai susunan kertas, daripadanya, apabila ditatal, imej dipaparkan di tengah-tengah peluncur:
- Reka bentuk penyesuaian;
- Flip - peralihan;
- Kesan 3D.
Demo |Muat turun
Tutorial ini akan menunjukkan kepada anda cara membuat peluncur dengan sentuhan: ideanya adalah untuk "memotong" dan memaparkan slaid semasa semasa anda membuka imej seterusnya atau sebelumnya. Menggunakan animasi JQuery dan CSS, kami boleh mencipta kesan peralihan yang unik:
- Reka bentuk penyesuaian;
- Peralihan berpecah;
- Peluncur skrin penuh.
Demo |Muat turun
Tiada loceng dan wisel yang tidak perlu, saiz kurang daripada 3KB. Gunakan mana-mana kod HTML untuk slaid anda, lanjutkan dengan CSS. Semua yang berkaitan dengan Unslider dihoskan di GitHub:
- Sokongan untuk pelbagai pelayar;
- Sokongan papan kekunci;
- Pelarasan ketinggian;
- Reka bentuk penyesuaian;
- Sokongan input sentuh.
Demo | Muat turun
Pemalam yang ringkas dan padat (hanya bersaiz 1 KB) yang mencipta peluncur responsif menggunakan elemen di dalam bekas. ResponsiveSLides.js berfungsi dengan pelbagai jenis penyemak imbas, termasuk semua versi IE daripada IE6 dan ke atas:
- Responsif sepenuhnya;
- Saiz 1 KB;
- Peralihan CSS3 dengan keupayaan untuk dijalankan melalui JavaScript;
- Penanda mudah menggunakan senarai bertitik tumpu;
- Keupayaan untuk menyesuaikan kesan peralihan dan tempoh tontonan satu slaid;
- Menyokong keupayaan untuk mencipta pelbagai persembahan slaid;
- Penatalan automatik dan manual.
Demo |Muat turun
Kamera ialah pemalam dengan banyak kesan peralihan dan reka letak responsif. Mudah disediakan, disokong oleh peranti mudah alih:
- Reka bentuk responsif sepenuhnya;
- Tandatangan;
- Keupayaan untuk menambah video;
- 33 ikon warna yang berbeza.
Demo |Muat turun
SlidesJS ialah pemalam responsif untuk JQuery (1.7.1 dan ke atas) dengan sokongan untuk peranti sentuh dan peralihan CSS3. Bereksperimen dengannya, cuba beberapa contoh siap sedia yang akan membantu anda memikirkan cara menambahkan SlidesJS pada projek anda:
- Reka bentuk penyesuaian;
- Peralihan CSS3;
- Sokongan untuk peranti sentuh;
- Mudah disediakan.
Demo | Muat turun
Ini adalah peluncur jQuery responsif percuma:
- Responsif sepenuhnya - menyesuaikan diri dengan mana-mana peranti;
- Perubahan slaid mendatar dan menegak;
- Slaid boleh mengandungi imej, video atau kandungan HTML;
- Sokongan yang diperluaskan untuk peranti sentuh;
- Menggunakan peralihan CSS untuk animasi slaid (pecutan perkakasan);
- API Panggilan Balik dan kaedah awam sepenuhnya;
- Saiz fail kecil;
- Mudah dilaksanakan.
Demo |Muat turun
Gelangsar responsif terbaik. Versi baharu telah dipertingkatkan untuk meningkatkan kelajuan dan kekompakan.
Demo | Muat turun
Galleria digunakan pada berjuta-juta tapak web untuk mencipta galeri imej berkualiti tinggi. Bilangan ulasan positif tentang kerjanya hanya di luar carta:
- Percuma sepenuhnya;
- Mod tontonan skrin penuh;
- 100% penyesuaian;
- Tiada pengalaman pengaturcaraan diperlukan;
- Sokongan untuk iPhone, iPad dan peranti sentuh lain;
- Flickr, Vimeo, YouTube dan banyak lagi;
- Beberapa topik.
Demo | Muat turun
Saya membentangkan kepada anda peluncur imej jQuery yang ditulis khusus untuk reka bentuk web responsif. Blueberry ialah pemalam peluncur imej sumber terbuka eksperimen yang ditulis khusus untuk berfungsi dengan templat responsif:
- Reka bentuk minimum;
- Susun atur penyesuaian;
- Persembahan.
Demo | Muat turun
Elemen standard versi pertama program digunakan: peluncur bersembunyi ke kiri dan muncul ke kanan. Elemen navigasi dan kapsyen yang sama yang muncul pada tetikus:
- Reka bentuk penyesuaian;
- Sokongan tandatangan;
- Mod persembahan slaid.
Demo | Muat turun
Tetapi memandangkan kita akan membincangkan asas JS, untuk mengkaji asasnya saya akan menerangkan cara membuat peluncur mudah menggunakan bahasa JavaScript sahaja. Baiklah, mari kita mula menganalisis bahan!
Apakah jenis peluncur yang ada dan di mana ia mungkin diperlukan?Mencipta galeri mudah untuk melihat imej diperlukan pada semua perkhidmatan web yang mengandungi sekurang-kurangnya beberapa gambar. Ini boleh menjadi kedai dalam talian, laman web portfolio, berita dan perkhidmatan pendidikan, tapak web syarikat dan pertubuhan hiburan dengan laporan foto, dsb.
Walau bagaimanapun, ini adalah penggunaan standard gelangsar. Teknologi sedemikian juga digunakan untuk menarik pelanggan kepada barangan promosi, perkhidmatan, atau untuk menerangkan kelebihan perusahaan.
Selalunya, pelanggan meminta untuk melaksanakannya pada galeri jenis "Karusel". Ini adalah alat yang mudah untuk melihat imej dalam saiz besar dengan keupayaan untuk pengguna menukar slaid ke hadapan dan ke belakang. Dalam kes ini, gambar itu sendiri biasanya bertukar secara automatik selepas masa tertentu. Mekanisme ini diberi jolokan kerana fakta bahawa paparan gambar diulang dalam bulatan.
Hari ini, jika anda mahu, anda boleh mencari pemalam yang paling luar biasa dan menarik di Internet untuk melihat satu set foto.
Aktiviti bebasNah, sekarang mari kita mula mencipta peluncur kita sendiri. Pada peringkat pembelajaran ini, untuk melaksanakannya, saya cadangkan anda menggunakan pure . Ini secara automatik akan menukar gambar dalam bulatan.
Di bawah saya telah melampirkan kod untuk permohonan saya. Saya meninggalkan komen untuk anda semasa saya mengekodkan.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Penukar imej automatik /*Memerihalkan penampilan bingkai, asas untuk peluncur masa hadapan */ #slides( kedudukan: relatif; tinggi: 415px; lebar: 100%; padding: 0px; senarai gaya-jenis: tiada; kotak- bayang: 0 0 7px #010, 0 0 10px biru, 0 0 15px #010, 0 0 35px #010; ) /* Mengedit paparan imej*/ img ( width: auto; height: 390px; padding: 13px; ) /* Menunjukkan bahawa item senarai kandungan akan dipaparkan di tengah-tengah elemen induk, i.e. dalam kes ini, di tengah-tengah elemen ul - asas untuk slaid */ li ( text-align: center; ) /* Saya menerangkan penampilan slaid itu sendiri */ .slide( position: absolute; opacity: 0 ; atas: 0px; kiri: 0px; tinggi: 100%; z-index: 3; lebar: 100%; latar belakang: biru; -moz-transition: opacity 1.5s; peralihan: opacity 1.5s; -webkit-transition: opacity 1.5s; ) /*Apabila memaparkan objek menjadi kelihatan dan bergerak ke latar depan*/ .showing( opacity: 1; z-index: 4; )
Saya harap anda tidak menghadapi sebarang masalah dengan kod css dan html. Tetapi saya menganggap perlu untuk membongkar kerja skrip. Oleh itu, mari kita beralih kepada mentafsir apa yang ditulis.
Jadi, pertama, menggunakan kaedah querySelectorAll, saya memberikan pembolehubah MySlider senarai semua elemen dalam julat yang ditentukan. Menunjukkan entri ini
document.querySelectorAll("#slides .slide")
Oleh itu, MySlider menyimpan koleksi empat elemen.
Seterusnya, saya nyatakan imej mana yang akan mula ditunjukkan dengan menetapkan pembolehubah currentPicture kepada sifar. Kemudian saya menunjukkan bahawa perubahan slaid berlaku dalam 2.7 saat dan fungsi pemprosesan nextSlide mesti dipanggil.
Mari kita beralih kepada fungsi itu sendiri.
Pada mulanya, untuk elemen senarai semasa, saya menukar penerangan kelas, i.e. Saya menulis semula "tayangan slaid" kepada "slaid". Akibatnya, imej menjadi tidak kelihatan.
Sekarang saya menentukan elemen koleksi baharu yang akan dipaparkan pada skrin. Untuk melakukan ini saya mengambil kedudukan semasa +1. Anda mungkin perasan bahawa saya juga menggunakan pembahagian dengan baki (%) mengikut bilangan slaid yang tersedia. Helah dengan telinga ini diperlukan untuk memulakan persembahan dalam bulatan baharu. Inilah rupanya secara literal:
Tetapi sekarang saya memberikan penerangan kelas "tayangan slaid" kepada elemen yang terhasil. Seperti yang anda lihat, semuanya dilaksanakan semudah mungkin.
Terima kasih kerana memberi perhatian. Jangan lupa untuk menyertai kumpulan pelanggan saya, baca artikel baharu dan, sudah tentu, kongsi pautan ke penerbitan kegemaran anda dengan rakan anda. Saya ucapkan selamat maju jaya dalam mempelajari JavaScript. Selamat tinggal!
Salam sejahtera, Roman Chueshov
Dibaca: 256 kali
Hari ini kita akan melihat bagaimana anda boleh membuat gelangsar menggunakan jQuery dengan tangan anda sendiri.
peluncur (atau sesetengah orang memanggilnya Rotator) ialah blok pada tapak web yang terdiri daripada satu set gambar dengan pautan (dan mungkin teks) yang bertukar antara satu sama lain dari semasa ke semasa.
Jadi. Mula-mula, kita perlu membuat blok yang akan mengandungi semua gambar (mari kita panggilnya viewport, boleh dikatakan "kawasan keterlihatan gelangsar").
Mari letakkan senarai tidak bernombor (ul) di dalamnya supaya kita boleh menyimpan semua slaid dengan mudah di satu tempat (pada dasarnya, anda boleh menggunakan mana-mana bekas blok yang menyokong elemen dalaman).
Nah, dan, dengan itu, slaid itu sendiri, yang akan terletak dalam slider jQuery.
Inilah yang sepatutnya kelihatan seperti HTML:
- Slaid 1
- Slaid 2
- Slaid 3
Mari segera menulis CSS supaya kod HTML akan berfungsi dengan betul.
Jadi:
1) kita perlu membuat viewport hanya menunjukkan kandungan yang diperlukan pada masa ini, dan selebihnya slaid disembunyikan
2) supaya bekas slaid (ul, yang terletak di dalam port pandangan) boleh bergerak ke kiri dan kanan dengan mudah
3) supaya slaid (yang kami buat dalam bentuk elemen senarai) terletak satu demi satu dari kiri ke kanan).
Berikut ialah CSS, semuanya mudah dengannya: limpahan: tersembunyi untuk vieport, kedudukan: mutlak untuk ul dan terapung: kiri untuk li.
Viewport( width: 300px; height: 100px; overflow: hidden; position: relative; ) .slidewrapper( position: absolute; left: 0; top: 0; height: 100px; margin: 0; padding: 0; ) .slide( lebar: 300px; tinggi: 100px; apungan: kiri; gaya senarai: tiada; jidar: 0; padding: 0; latar belakang: #ff0000; ) .second( latar belakang: #00ff00; ) .third( latar belakang: #0000ff; )
Sebagai contoh, port pandangan dan saiz slaid yang dipilih ialah 300x100 piksel (tetapi ia mesti sepadan dengan port pandangan dan slaid). Kelas pertama, kedua dan ketiga hanya digunakan untuk menetapkan warna slaid untuk kejelasan; pelaksanaan anda mungkin tidak mempunyai kelas ini.
JS. Slider dalam jQuerySekarang mari kita beralih kepada kod jQuery, yang dengan sendirinya juga bukanlah sesuatu yang terlalu rumit.
Kita perlu memastikan bahawa slaid ditatal dengan tempoh masa tertentu (javascript setInterval), dan apabila melayang di atas slaid, pergerakan dijeda (supaya seseorang boleh membaca kandungan slaid).
Jadi kami mendapat kod jQuery ini:
Var slideWidth=300; var sliderTimer; $(function())( $(".slidewrapper").lebar($(".slidewrapper").kanak-kanak().saiz()*slideWidth);sliderTimer=setInterval(nextSlide,1000); $(".viewport " ).hover(function())( clearInterval(sliderTimer); ),function())( sliderTimer=setInterval(nextSlide,1000); )); )); fungsi nextSlide())( var currentSlide=parseInt($(".slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(".slidewrapper").kanak-kanak().saiz()) ( CurrentSlide=0; ) $(".slidewrapper").animate((kiri: -currentSlide*slideWidth),300).data("current",currentSlide); )
mengikut urutan:
1) mengisytiharkan pembolehubah = panjang slaid
2) mengisytiharkan pembolehubah pengendali pemasa (yang akan mengira tempoh menukar slaid)
3) apabila halaman dimuatkan, kami memulakan pemasa dan mengikat tindakan untuk melayang tetikus di atas slaid (untuk menjeda pergerakan slaid di bawah tetikus)
4) tetapkan panjang bekas ul = panjang slaid * dengan bilangan slaid (supaya slaid tidak tumpah ke baris ke-2).
5) tulis fungsi yang menukar slaid (semak di mana kita berada sekarang - slaid yang mana, menggunakan atribut ul-container data-current; tingkatkan kedudukan semasa; semak bahawa ia tidak melampaui bingkai semua slaid; gerakkan slider- bekas ke kiri dengan bilangan piksel yang diperlukan).
Kami telah membangunkan versi penggelangsar jQuery yang berfungsi yang berfungsi dan boleh digunakan dengan mudah semasa bekerja di tapak web.
Akhir sekali, kod tersebut disiarkan di jsfiddle.net, di mana anda boleh mengklik dan bermain-main.
http://jsfiddle.net/FUxWc/
Jika anda mempunyai sebarang pertanyaan, komen terbuka, kami akan menjawab, membantu, dan menasihati.
Penyesuaian, atau jika anda lebih suka, reka bentuk web responsif kini bukan sekadar satu lagi trend reka bentuk, ia sudah menjadi standard tertentu untuk pembangunan laman web, memastikan kepelbagaian tapak web dan persepsi visual yang harmoni pada skrin pelbagai peranti pengguna. Baru-baru ini, apabila membangunkan templat responsif, saya terpaksa berhadapan dengan pelbagai kesukaran dalam menyepadukan peluncur dan galeri imej tertentu tanpa mengganggu gaya reka bentuk keseluruhan. Pada masa kini segala-galanya lebih mudah, terdapat sejumlah besar penyelesaian siap sedia di Internet dan yang paling menggembirakan ialah kebanyakannya tersedia secara percuma, sumber terbuka.
Oleh kerana kepelbagaian alat yang ditawarkan, saya telah menyusun gambaran ringkas tentang perkembangan paling ketara bagi peluncur imej jQuery responsif yang telah muncul baru-baru ini dan diedarkan tanpa sebarang sekatan, i.e. benar-benar percuma.
WOW SliderGelangsar imej jQuery responsif dengan set kesan visual yang hebat (putaran, flyout, kabur, lingkaran, bidai, dll...) dan banyak templat siap sedia. Dengan wizard sisipan halaman terbina dalam WOW Slider, anda boleh dengan mudah dan mudah mencipta tayangan slaid yang menakjubkan dalam beberapa minit. Tapak web pembangun mengandungi semua dokumentasi yang diperlukan untuk menyediakan dan menggunakan pemalam dalam bahasa Rusia, serta contoh langsung yang sangat baik tentang cara pemalam itu berfungsi. Pemalam Wordpress yang berasingan dan modul untuk Joomla juga tersedia untuk dimuat turun. Saya pasti ramai yang akan menyukai peluncur yang hebat ini, baik pemula mahupun juruweb berpengalaman.
HiSliderHiSlider - HTML5, peluncur Jquery dan galeri imej, pemalam yang benar-benar percuma untuk kegunaan peribadi pada tapak yang menjalankan sistem popular - WordPress, Joomla, Drupal. Dengan bantuan alat yang ringkas tetapi agak berfungsi ini, anda boleh membuat persembahan slaid yang menakjubkan dan bersemangat, persembahan yang menakjubkan dan pengumuman mesej baharu pada halaman tapak web anda. Beberapa templat dan kulit siap sedia untuk peluncur, kesan peralihan (perubahan) kandungan yang menakjubkan, keluaran pelbagai kandungan multimedia: video daripada YouTube dan Vimeo, tetapan pengguna yang fleksibel, dsb...
Nivo Slider ialah yang lama yang bagus, terkenal kepada semua orang yang tahu, salah satu peluncur imej yang paling cantik dan mudah digunakan. Pemalam JQuery Nivo Slider adalah percuma untuk dimuat turun dan digunakan serta dilesenkan di bawah lesen MIT. Terdapat juga pemalam yang berasingan untuk WordPress, tetapi malangnya ia sudah dibayar dan anda perlu membayar $29 untuk satu lesen. Adalah lebih baik untuk melakukan sedikit keajaiban dengan fail tema WP dan melampirkan versi jQuery percuma pemalam Nivo Slider ke blog anda, kerana terdapat banyak maklumat tentang cara melakukannya di Internet.
Bagi fungsi, semuanya baik-baik saja dengan ini. Ia menggunakan perpustakaan jQuery v1.7+, kesan peralihan yang cantik, tetapan mudah dan sangat fleksibel, susun atur penyesuaian, pemangkasan imej automatik dan banyak lagi.
Idea gelangsar telah diilhamkan oleh pemaju, yang terkenal dengan gaya persembahan produk Apple, di mana beberapa objek kecil (gambar) berubah dengan mengklik pada kategori yang dipilih dengan kesan animasi yang mudah. Codrops mempersembahkan kepada anda tutorial terperinci tentang cara membuat peluncur ini, susun atur lengkap penanda Html, satu set peraturan CSS dan pemalam jQuery boleh laku, serta contoh langsung yang menarik menggunakan peluncur.
Gelangsar imej skrin penuh menggunakan JQuery dan CSS3 + tutorial terperinci mengenai penyepaduan pemalam ke halaman tapak web. Ideanya adalah untuk menghiris slaid semasa terbuka dengan kandungan tertentu apabila beralih ke kandungan seterusnya atau sebelumnya. Menggunakan animasi JQuery dan CSS anda boleh membuat peralihan unik antara slaid. Susun atur responsif peluncur memastikan ia kelihatan sama baik pada pelbagai jenis peranti pengguna.
Peluncur kandungan yang melaraskan lebar dan ketinggian secara automatik bergantung pada saiz bekas induk di mana ia berada. Agak mudah untuk dilaksanakan dan fleksibel dalam tetapan, peluncur berjalan pada JQuery, dengan navigasi di bahagian bawah; apabila saiz skrin ditukar ke bawah, navigasi dipaparkan dalam bentuk ikon. Dokumentasi yang sangat terperinci (tutorial penciptaan) dan contoh penggunaan secara langsung.
Versi percubaan peluncur yang menunjukkan imej dengan peralihan daripada satah 3D. Imej dibahagikan kepada dua susunan mendatar, menggunakan anak panah navigasi untuk menukar dan mengalihkan setiap imej berikutnya kepada keadaan tontonan. Secara umum, tiada yang istimewa, tetapi idea itu sendiri dan teknik pelaksanaannya agak menarik.
Peluncur imej jQuery yang sangat mudah, responsif 100% dan skrin penuh. Operasi peluncur adalah berdasarkan peralihan CSS (sifat peralihan) bersama-sama dengan keajaiban jQuery. Nilai lebar maksimum ditetapkan kepada 100% secara lalai, jadi saiz imej akan berubah bergantung pada perubahan dalam saiz skrin. Tiada kesan animasi khas atau tambahan dalam reka bentuk, semuanya mudah dan direka untuk operasi tanpa masalah.
Nama itu bercakap untuk dirinya sendiri, ini mungkin salah satu peluncur imej jQuery yang paling ringan dan minimalis yang pernah saya temui (pemalam 1kb). ResponsiveSlides.js ialah pemalam JQuery kecil yang mencipta tayangan slaid menggunakan elemen di dalam bekas. Berfungsi dengan pelbagai jenis penyemak imbas, termasuk semua versi IE - brek yang terkenal sedang berjalan, dari IE6 dan lebih tinggi. Kerja ini menggunakan peralihan CSS3 bersama-sama dengan javascript untuk kebolehpercayaan. Susun atur ringkas menggunakan senarai tidak tersusun, penyesuaian peralihan dan selang masa, kawalan automatik dan manual bagi penukaran slaid, serta sokongan untuk berbilang persembahan slaid sekaligus. Inilah "bayi" yang suka bermain.
Kamera ialah pemalam JQuery percuma untuk mengatur tayangan slaid pada halaman tapak web, peluncur ringan dengan banyak kesan peralihan, susun atur responsif 100% dan tetapan yang sangat mudah. Sesuai dengan sempurna pada skrin mana-mana peranti pengguna (monitor PC, tablet, telefon pintar dan telefon mudah alih). Kemungkinan menunjukkan video terbenam. Perubahan slaid automatik dan kawalan manual menggunakan butang dan blok lakaran kecil imej. Galeri gambar yang hampir lengkap dalam reka bentuk yang padat.
Satu lagi peluncur responsif yang agak mudah dalam jQuery. Anda boleh meletakkan sebarang kandungan, video, imej, teks dan elemen lain pada slaid anda. Sokongan yang diperluaskan untuk skrin sentuh. Menggunakan animasi peralihan CSS. Sebilangan besar variasi persembahan slaid dan galeri imej padat yang berbeza. Kawalan automatik dan manual. Tukar slaid menggunakan butang dan dengan memilih lakaran kecil. Saiz fail sumber yang kecil, sangat mudah untuk dikonfigurasikan dan dilaksanakan.
FlexSlider 2 - Versi penggelongsor yang dikemas kini dengan nama yang sama, dengan responsif yang dipertingkatkan, pengurangan skrip dan pengecilan aliran semula/lukisan semula. Pemalam ini termasuk peluncur asas, kawalan slaid dengan lakaran kecil, anak panah kiri-kanan terbina dalam dan bar navigasi bawah dalam bentuk butang. Keupayaan untuk memaparkan video dalam slaid (vimeo), tetapan fleksibel (peralihan, reka bentuk, selang masa), susun atur penyesuaian sepenuhnya.
Pemalam jQuery responsif yang terkenal dan agak popular untuk mencipta galeri imej dan peluncur berkualiti tinggi. Antara muka gelangsar, terima kasih kepada panel kawalannya, secara visual menyerupai pemain video biasa; pemalam itu termasuk beberapa tema reka bentuk yang berbeza. Sokongan untuk video dan imej terbenam daripada perkhidmatan popular: Flickr, Vimeo, YouTube dan lain-lain. Dokumentasi terperinci mengenai persediaan dan penggunaan.
Peluncur imej jQuery percuma yang ringkas dan percuma yang ditulis khusus untuk reka bentuk web responsif. Blueberry ialah pemalam jQuery sumber terbuka eksperimen. Reka bentuk minimalis, tiada kesan, hanya imej pop timbul yang lancar menggantikan satu sama lain selepas tempoh masa tertentu. Semuanya sangat mudah, pasang, sambung dan pergi...
Peluncur imej jQuery yang sangat padat dengan elemen Peti Cahaya. Terima kasih kepada dimensi fleksibelnya, ia sangat mudah untuk disepadukan ke dalam mana-mana bekas, ke dalam satu entri dalam bentuk lakaran kecil, apabila menuding kursor tetikus atau mengkliknya, peti cahaya dengan gambar dan kawalan yang diperbesarkan diaktifkan. Adalah mudah untuk meletakkan peluncur sedemikian di panel sisi untuk membentangkan produk atau pengumuman berita. Penyelesaian yang sangat baik untuk tapak dengan jumlah maklumat yang banyak.
Gelangsar responsif percuma dengan peralihan CSS3 lanjutan. Gaya minimalis, 3 tema reka bentuk, Setiap bingkai meluncur secara mendatar, muncul di tengah, gambar pergi ke kiri, tandatangan ke kanan, lakaran kecil diduplikasi di sudut kanan bawah. Penomboran paparan produk untuk dilihat dalam setiap bingkai. Kawalan juga termasuk butang belakang dan hadapan. Disokong oleh semua pelayar moden.
Gelangsar imej yang sangat mudah dari segi fungsi dan tetapan; antara tetapan terdapat perubahan dalam kelajuan menukar slaid, pengaktifan mod manual (butang kawalan diaktifkan), tayangan slaid berterusan. Gelangsar ini mempunyai hak untuk wujud dan ia menarik saya hanya kerana ia wujud; Saya tidak menemui apa-apa yang menarik dalam perkembangan ini, mungkin saya tidak mencarinya dengan baik)))
Seperti slider imej yang cantik dan adaptif dari Vladimir Kudinov, rakan-rakan. Alat yang kukuh dan direka bentuk dengan baik, disediakan dengan contoh ilustrasi dan arahan terperinci untuk penciptaan, pemasangan dan penggunaan. Reka bentuk penyesuaian, butang bagus dan anak panah hijau, semuanya agak bagus dan tenang, tanpa tekanan.
Pemalam gelangsar JQuery percuma dengan kesan paralaks untuk imej dan slaid teks. Animasi slaid mempunyai berbilang nilai paparan dengan kawalan penuh dalam setiap masa dan tetapan animasi. Keupayaan untuk menghidupkan beberapa elemen pada slaid sekaligus. Anda boleh menetapkan kaedah animasi yang berbeza, slaid pudar atau peralihan dari arah tertentu. Paparan automatik dan kawalan manual menggunakan anak panah navigasi yang muncul apabila anda menuding pada imej. 10 jenis kesan animasi slaid dan banyak lagi...
Kajian itu ternyata agak luas, tetapi tidak cukup bermaklumat kerana banyak produk yang dipertimbangkan. Anda boleh mengetahui semua butiran dan penerangan terperinci tentang fungsi pemalam tertentu secara langsung pada halaman pembangun. Saya hanya boleh berharap bahawa saya telah memudahkan seseorang untuk mencari alat yang sangat diperlukan untuk mencipta peluncur gambar berwarna-warni pada halaman laman web mereka.
Dengan segala hormatnya, Andrew
