![]() |
Home | Tutorials | Fonts | IG Store | Contact |
Membuat Slideshow Foto Auto dengan jQueryPublish: 24 Desember 2014 | Author & Copyright: Johan | Status: Tutorial jQuery Sewaktu membaca inbox di gmail ternyata ada seorang yang menanyakan kepada saya bagaimana cara untuk membuat Automatic Animasi Slideshow atau Slide Foto Auto dengan menggunakan jQuery. Biasanya fitur ini dipakai untuk membuat animasi pada headline berita pada sebuah halaman utama website. Sehingga berita akan tampil bergantian sesuai dengan pengaturan waktu (timer) yang anda inginkan. Download dulu bahan - bahan (support file) pembuatan animasi Slideshow foto otomatis autoplay : Isi Support Files : Tanpa bertele - tele dan panjang lebar maka berikut ini tutorial cara membuat animasi Slideshow Foto Otomatis yang akan saya jelaskan secara singkat jelas dan padat. 1. Langkah pertama adalah bersabar & fokus... hehehe... coba perhatikan kodenya :
Script diatas fungsinya untuk menghubungkan ketiga bahan : jquery-1.8.0.min + head.css + headline.js Sedangkan kode diantara <script type="text/javascript"> ... </script> adalah untuk memanggil fungsi jquery. Bingung? ok silahkan anda baca lagi apa itu jQuery di Tentang jQuery 2. Sekarang masuk ke tahap input / memanggil gambar, perhatikan kode berikut ini : Kode ini terletak diantara tag <body> ... </body>
Anda tinggal mengganti input dari Title (judul foto slideshow), img src (ini untuk menghubungkan image / foto yang akan kita slideshow), dan teks (berfungsi sebagai deskripsi / tambahan keterangan) Mudah bukan, nantinya anda tinggal mengutak - atik inputnya 3. Untuk merubah ukuran border maka kita bisa mengutak - atiknya di head.css, jadi buka head.css di aplikasi notepad atau dreamweaver Animasi Foto Slide Automatis dengan jQuery Slideshow telah saya tes di browser mozilla firefox, google chrome, android browser, opera browser maupun opera mini dan semuanya berjalan baik dan lancar (all work). Terima kasih, semoga bermanfaat
![]() Info dan Kontak Penulis Johan Felisitas Rekomendasi ilmugrafis
[adv.] Supported by ![]() DumetSchool.com |
PHOTOSHOP Photoshop Dasar Photoshop Teks Effect Photoshop Photo Efek Photoshop Alternatif Photoshop Plugins CORELDRAW CorelDRAW Dasar CorelDRAW Logo CorelDRAW Bebas CorelDRAW Tools FOTOGRAFI Lightroom VECTOR Adobe Illustrator ANIMASI Flash Swishmax 3D MODELING 3dsMAX AutoCAD Cinema 4D Blender VIDEO EDITING Adobe Premiere After Effect Pinnacle WEB DESIGN Dreamweaver jQuery PUBLISHING InDesign Ms. Paint FREEWARE Gimp Inkscape ARTS News Artikel Gallery Jasa Desain FRIENDS Photoshop Desain Hog Pictures www.Canva.com/id_id/ Link to us ![]() ![]() ![]() Privacy policy Channel Youtube ![]() |
Peta Situs | Term of Use | web edukasi - ilmugrafis.com Indonesia |
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe Hak Cipta Dilindungi Undang - Undang & Dmca |