WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Slider

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Slider membolehkan anda untuk mempunyai kandungan horizontaly selaras yang tidak sesuai pada saiz tetingkap yang anda mahu. Anda boleh meletakkan sebagai banyak perkara yang anda mahu. Item terdiri daripada imej, label dan pautan. Jika anda mahu anda boleh mengatasi teks pautan kepada semua atau kepada hanya satu atau dua perkara.

Bagaimana nak guna

Selepas termasuk PrototypeJS dan Scriptaculous (kesan + dragp & drop), termasuk slider.js fail (objek) dan slider.css fail (gaya).

Kemudian, hanya memasukkan sesuatu seperti ini pada beban tingkap:

 baru Slider ({ "slider": "slider-test1", "perkara": [ {"File": "heroes.jpg", "label": "Heroes", "link": "http://www.hulu.com/heroes"}, {"File": "prisonbreak.jpg", "label": "Prison Break", "link": "http://www.hulu.com/prison-break"} ] }); 

Kod ini mewujudkan slider pada unsur yang mempunyai ID yang "slider-ujian". Ia mempunyai 2 item-item: Wira dan Prison Break.

Slider Pilihan

Senarai berikut menunjukkan semua pilihan yang ada kepada Slider.
  • slider - slider objek ibubapa atau ID
  • itemWidth - Slaid lebar (lalai adalah 320)
  • itemHeight - ketinggian slaid (lalai adalah 200)
  • imej slaid jalan (lalai ialah "imej /") - laluan
  • linktext - Slaid pautan teks lalai (default adalah "Explore")
  • bernyawa - bernyawa slider (default adalah benar). Gelangsar akan menyimpan menatal sehingga anda klik dragger itu.
  • animationDelay - masa antara animasi, di saat (lalai ialah 5)
  • slideDelay - masa kesan slaid, di saat (lalai adalah 1)
  • slideLoop - apabila mencapai item terakhir, gelung dengan yang pertama? (lalai adalah benar)
  • onClick - acara yang dipanggil apabila mengklik pautan item (lalai adalah tiada)

Daripada memberikan pautan ke setiap item, anda boleh menetapkan fungsi panggil balik apabila mengklik item tertentu atau panggil balik lalai. Perhatikan bahawa jika anda menetapkan panggil balik lalai, ia akan sentiasa dipanggil dan capaian yang tidak akan digunakan.

 baru Slider ({ "slider": "slider-test1", "onClick": Fungsi (item) { amaran ("Anda klik item" + item.get ("label")); } "perkara": [ {"File": "heroes.jpg", "label": "Heroes"}, {"File": "prisonbreak.jpg", "label": "Prison Break", "onClick": fungsi () {amaran ("Anda klik PENJARA BREAK!"); }} ] }); 

Dalam kod sebelumnya, panggil balik lalai akan dipanggil untuk item "Heroes" tetapi tidak untuk "Prison Break" kerana item ini mempunyai panggil balik tertentu.

Lihat demo di http://envato.diogoresende.net/slider/


Memuat turun
Komponen-komponen lain dalam kategori iniSemua komponen pengarang ini
KomenSoalan-soalan lazim dan jawapan

Properties

Dibuat:
24 Feb 10

Kemaskini:
N / A

Pelayar Sesuai:
Firefox, IE7, IE8, Opera, Safari

Fail Termasuk:
CSS, HTML, JavaScript JS

Perpustakaan JS:
Prototaip 1.6, Script.aculo.us

Kata kunci

eCommerce, eCommerce, Semua Produk, banner, gelongsor