Cara Unik Slideshow JQuery

info-gamepc.blogspot.com - Dalam tutorial ini, kita akan menggunakan jQuery untuk membuat sebuah slideshow, Hari ini saya akan membawa Anda mengenalkan jQuery slideshow sederhana melalui proses langkah demi langkah, mudah-mudahan, ini menunjukkan betapa mudahnya untuk mendatangkan dengan sebuah ide dan menggabungkannya dengan jQuery.

Sedikit tentang jQuery

JQuery adalah kumpulan JavaScript yang memungkinkan Anda menghubungkan JavaScript dengan kode HTML Anda. Pada dasarnya, ini memungkinkan untuk melakukan hal-hal yang Anda mungkin sudah pernah dilakukan dengan Flash, tapi tanpa implikasi SEO terkait, Anda dapat mempelajari lebih lanjut di situs jQuery.

Slideshow kami

Mari kita bayangkan, kita ingin siklus slideshow melalui slide pada interval waktu yang bisa kita atur. Kita juga ingin maju dan tombol kembali sehingga kita bisa melompat-lompat diantara slide dan setiap slide memiliki judul, deskripsi dan link yang terkait dengannya.

Bagaimana slideshow kita akan bekerja.

Yang paling penting untuk memahami menggunakan jQuery adalah bahwa sebagian besar pekerjaan dilakukan oleh CSS kami. JQuery memungkinkan Anda untuk menambah dan menghapus unsur-unsur gaya dan menghidupkan antara perubahan. Ini adalah dasar untuk membuat slideshow sederhana dengan jQuery. Dan karena Anda sudah master CSS, ini akan menjadi sangat mudah! Pada dasarnya slideshow hanya sekelompok gambar, berbaris berdampingan dengan atribut mengambang dan dilihat melalui jendela yang hanya dengan itu bisa diatur ke tersembunyi. Semua jQuery dilakukan memindahkan slide bolak-balik dengan menyesuaikan margin kiri berisi semua slide.

Mari kita mulai membuat slideshow kami. Seperti biasa ketika melakukan sesuatu yang baru, memecahkan masalah menjadi langkah demi langkah. Hal pertama yang akan saya lakukan adalah membuat html dan css, kemudian menggunakan jQuery untuk mendapatkan gambar bergerak. Kemudian saya akan menambahkan teks dan link dan setelah itu saya akan menambahkan beberapa tombol sehingga kita dapat menavigasi maju dan mundur melalui slide.

Mari lihat kode dibawah ini:

<div id="slideshow"> <div id="slideshowWindow">
<div class="slide"> <img src="slide1.jpg" />
</div><!--/slide--> <div class="slide"> <
img src="slide2.jpg" /> </div><!--/slide--> <
div class="slide"> <img src="slide3.jpg" /> </div><
!--/slide--> </div><!--/slideshowWindow--> </div><!--/slideshow-->

Anda bisa melakukan ini dengan daftar jika tidak ada masalah, tapi karena saya tidak tahu apa yang kita tambahkan kemudian, saya pikir mungkin lebih bijaksana untuk menggunakan divs, jadi saya lakukan.

Mari menambahkan beberapa css:

#slideshow
#slideshowWindow
{
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}

#slideshow
#slideshowWindow .slide
{
margin:0;
padding:0;
width:500px;
height:257px;
float:left;
position:relative;
}

Saya tidak menyertakan styling sini untuk luar # slideshow d i v tetapi Anda dapat menambahkan apapun yang Anda butuhkan untuk posisi slide pada halaman Anda. The slideshowWindow d i v dasarnya adalah jendela di mana kita akan melihat slideshow kita. Yang penting untuk diperhatikan di sini adalah bahwa overflow diatur tersembunyi. Dan tentu saja d i v geser memegang satu slide dan kemudian konten apapun akan terkait dengan itu seperti judul, deskripsi dan link. Sekarang kita perlu menambahkan beberapa jQuery untuk membuat slide kita bergerak. Jika Anda tidak punya sudah, Anda perlu men-download jQuery. Setelah Anda mendapatkannya, Anda harus menyertakan file di bagian kepala halaman Anda, pastikan bahwa Anda punya jalan yang benar: