jquery plug-in bxslider contoh penggunaan analysis_jquery

Contoh dalam artikel ini menerangkan penggunaan jquery plug-in bxslider. Kongsikan dengan semua orang untuk rujukan anda. Penggunaan khusus adalah seperti berikut:

Panggil dahulu fail js yang sepadan:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

bahagian kod jQuery:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

Struktur HTML adalah seperti berikut:

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="img/1.jpg" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="img/2.jpg" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS mentakrifkan gaya butang kiri dan kanan:

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

Perihalan parameter:

parameter konfigurasi terperinci bxSlider:
bxSlider mempunyai banyak parameter konfigurasi, membolehkan anda menggunakan parameter untuk mencipta pelbagai kesan peluncur:

mod: 'mendatar', // 'mendatar', 'menegak', 'pudar' mentakrifkan arah menatal peluncur Terdapat tiga nilai untuk dipilih
infiniteLoop: true, // true, false - paparkan slaid pertama selepas gelung infinite terakhir
hideControlOnEnd: false, // true, false - jika benar, akan menyembunyikan kawalan 'seterusnya' pada slaid terakhir dan kawalan 'sebelumnya' pada mula-mula Jika ditetapkan kepada benar, akan menyembunyikan "seterusnya" pada slaid terakhir dan pada slaid hadapan Filem oleh itu "sebelumnya"
kawalan: benar, // benar, salah - sebelumnya dan seterusnya mengawal sama ada untuk memaparkan butang "sebelumnya" dan "seterusnya"
kelajuan: 500, // integer - dalam ms, tempoh peralihan slaid masa akan menduduki Kelajuan, unit ialah milisaat
pelonggaran: 'swing', // digunakan dengan jquery.easing.1.3.js - lihat http://gsgd.co.uk/sandbox/jquery/easing/ untuk pilihan yang tersedia
alat kelui: benar, // benar / salah - paparkan alat kelui
pagerSelector: null, // jQuery selector - elemen untuk mengandungi pager cth: '#pager'
pagerType: 'penuh', // 'penuh', 'pendek' - jika pager 'penuh' memaparkan 1,2,3... jika pager 'pendek' memaparkan 1 / 4 Jika penuh ditetapkan, 1, 2, 3 akan dipaparkan ..., jika pendek ditetapkan, 1/4 akan dipaparkan pagerLocation: 'bawah', // 'bawah', 'atas' - lokasi pager Lokasi nombor halaman
pagerShortSeparator: '/', // rentetan - cth: 'of' pager akan memaparkan 1 daripada 4 pemisah halaman
pagerActiveClass: 'pager-active', // string - nama kelas dilampirkan pada pautan pager aktif className nombor halaman semasa
nextTeks: 'seterusnya', // rentetan - teks dipaparkan untuk kawalan 'seterusnya' Teks halaman seterusnya
nextImage: '', // rentetan - laluan fail imej yang digunakan untuk kawalan 'seterusnya' cth: 'images/next.jpg' Anda boleh menetapkan halaman seterusnya kepada imej
nextSelector: null, // jQuery selector - elemen untuk mengandungi kawalan seterusnya cth: '#next'
prevText: 'prev', // rentetan - teks dipaparkan untuk kawalan 'sebelumnya' Teks halaman sebelumnya
prevImage: '', // rentetan - laluan fail imej yang digunakan untuk kawalan 'sebelumnya' cth: 'images/prev.jpg' Gambar pada halaman sebelumnya
prevSelector: null, // jQuery selector - elemen untuk mengandungi kawalan sebelumnya cth: '#next'
kapsyen: palsu, // benar, palsu - paparkan kapsyen imej (membaca teg 'tajuk' imej) Sama ada mahu memaparkan tajuk imej dan membaca kandungan atribut tajuk imej.

captionsSelector: null, // jQuery selector - elemen untuk mengandungi kapsyen cth: '#captions'
auto: palsu, // benar, palsu - buat perubahan tayangan slaid secara automatik Tayangan slaid secara automatik menatal
autoArah: 'seterusnya', // 'seterusnya', 'sebelumnya' - arah yang menunjukkan auto akan melintasi susunan tatal automatik
autoControls: false, // true, false - tunjukkan kawalan 'mula' dan 'berhenti' untuk auto tunjukkan kekunci kawalan tatal automatik
autoControlsSelector: null, // jQuery selector - elemen untuk mengandungi kawalan auto cth: '#auto-controls'
autoStart: benar, // benar, salah - jika rancangan palsu akan menunggu kawalan 'mula' untuk mengaktifkan
autoHover: false, // true, false - jika true show akan dijeda pada mouseover Menetapkan mouseover akan menyebabkan penatalan automatik dijeda
autoDelay: 0, // integer - dalam ms, jumlah masa sebelum memulakan auto show
jeda: 3000, // integer - dalam ms, tempoh antara setiap masa peralihan peralihan slaid
startText: 'start', // string - teks dipaparkan untuk 'start' control start button text
startImage: '', // rentetan - laluan fail imej yang digunakan untuk kawalan 'mula' cth: 'images/start.jpg' Imej butang mula
stopText: 'berhenti', // rentetan - teks dipaparkan untuk kawalan 'berhenti' Teks butang berhenti
stopImage: '', // rentetan - laluan fail imej yang digunakan untuk kawalan 'stop' cth: 'images/stop.jpg' Imej butang henti
ticker: palsu, // benar, palsu - mod ticker gerakan berterusan (fikirkan ticker berita)
// nota: autoControls dan autoControlsSelector digunakan pada ticker! tickerSpeed: 5000, // integer - mempunyai kesan songsang pada kelajuan oleh itu, nilai 10000 akan
// tatal sangat perlahan manakala nilai 50 akan tatal dengan sangat cepat tickerDirection: 'next', // 'next', 'prev' - arah yang menunjukkan ticker akan melintasi
tickerHover: false, // true, false - jika true ticker akan berhenti seketika pada tetikus
wrapperClass: 'bx-wrapper', // rentetan - nama kelas dilampirkan pada pembalut gelangsar
Slaid permulaan: 0, // integer - tayangan akan bermula pada slaid yang ditentukan: slaid adalah berdasarkan
displaySlideQty: 1, // integer - bilangan slaid untuk dipaparkan sekaligus
moveSlideQty: 1, // integer - bilangan slaid untuk dialihkan sekaligus
randomStart: false, // true, false - jika true show akan bermula pada slaid rawak

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.