jQuery plug-in Slider Revolution melaksanakan animasi responsif menukar gambar gelongsor effect_jquery

Ini ialah pemalam pensuisan kandungan yang sangat berkuasa Ia berdasarkan jQuery Ia responsif sepenuhnya, menyokong peranti mudah alih, menyokong sentuhan telefon mudah alih, dan ia mempunyai tayangan slaid terbina dalam dan pemasa main balik. dan ia mempunyai pelbagai mod: Definisi automatik, respons automatik, skrin penuh; ia mempunyai pelbagai kesan animasi, kesan 3D... Ringkasnya, ia boleh melakukan semua kesan yang anda fikirkan, dan namanya adalah Slider Revolution.

HTML

Slider Revolution ialah pemalam berasaskan jQuery Apabila menggunakannya, anda perlu memuatkan fail perpustakaan jQuery terlebih dahulu, serta fail css dan js yang bergantung pada Slider Revolution.

<script src="js/jquery.js"></script> 
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> 
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 

Struktur HTML utama penukaran kandungan adalah seperti berikut div.tp-banner mengandungi berbilang

dan kandungan penukaran diletakkan dalam

, termasuk imej utama, teks dan maklumat butang. Maklumat ini dipasangkan dengan atribut data masing-masing untuk diiktiraf oleh Slider Revolution.

<div class="tp-banner-container"> 
 <div class="tp-banner" > 
  <ul> 
   <!-- SLIDE --> 
   <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > 
    <!-- MAIN IMAGE --> 
    <img src="/static/imghwm/default1.png"  data-src="images/bg1.jpg"  class="lazy" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
 
   </li> 
   <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" > 
    <!-- MAIN IMAGE --> 
    <img src="/static/imghwm/default1.png"  data-src="images/bg2.jpg"  class="lazy" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
   </li> 
   .... 
  </ul> 
 </div> 
</div> 

panggilan jQuery

Selepas struktur HTML disusun, anda boleh memanggil pemalam Slider Revolution Selepas menampal kod di atas, buka pelayar dan anda boleh melihat kesan penukaran.

 
$(function() { 
 $('.tp-banner').revolution({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  hideThumbs:10 
 }); 
}); 

Tetapan dan penerangan pilihan

Revolusi Slider menyediakan banyak tetapan pilihan parameter:
kelewatan: masa tinggal kandungan gelongsor. Lalai 9000 milisaat
ketinggian permulaan: ketinggian kandungan gelongsor, lalai 490 piksel.
lebar permulaan: lebar kandungan gelongsor, lalai 890 piksel.
navigationType: Paparkan ikon membelok halaman, lalai ialah "peluru" (titik), jika ditetapkan kepada "tiada" ia tidak akan dipaparkan. .
navigationArrows: Memaparkan anak panah membelok halaman Lalai adalah nexttobullets, yang bermaksud anak panah membelok halaman kiri dan kanan dipaparkan apabila tetikus meluncur Jika ditetapkan kepada tiada, ia tidak akan dipaparkan.
didayakan sentuh: Sama ada gelongsor sentuh dibenarkan. Lalai dihidupkan, yang dibenarkan.
onHoverStop: Sama ada untuk mendayakan jeda apabila tetikus meluncur, hidup: hidup, mati: mati.
FullWidth: Sama ada untuk mendayakan paparan skrin penuh kandungan imej, hidup: hidup, mati: mati.

Pelbagai kesan boleh ditetapkan untuk setiap tag

data-transition: kesan gelongsor kandungan, anda boleh menetapkan nilai berikut: boxslide, boxfade, slotzoom-horizontal, slotslide-horizontal, slotfade-horizontal, slotzoom-menegak, slotslide-menegak, slotfade-menegak, tirai-1, tirai-2 , langsir -3, slaid kiri, slaid kanan, slaid atas, slaid ke bawah, pudar
data-slotamount: Bilangan blok persegi yang dibahagikan kepada semasa menukar.
pautan data: pautan imej
kelewatan data: Tetapkan masa tinggal kandungan peluncur semasa
Untuk setiap elemen dalam li, anda boleh menetapkan pilihan berikut untuk mencapai pelbagai kesan.

Gaya animasi, atribut kelas: Nilai atribut kelas mewakili gaya animasi yang berbeza: sft - Pendek dari Atas, sfb - Pendek dari Bawah, sfr - Pendek dari Kanan, sfl - Pendek dari Kiri, lft - Panjang dari Atas, lfb - Panjang dari Bawah , lfr - Panjang dari Kanan, lfl - Panjang dari Kiri, pudar - pudar
data-x: anjakan mendatar unsur semasa berbanding li
data-y: anjakan menegak unsur semasa berbanding li
kelajuan data: masa animasi, milisaat
data-start selepas: Tunggu beberapa saat sebelum elemen semasa dipaparkan
pelonggaran data: animasi penimbal, termasuk easeOutBack... pelbagai kesan animasi, sila rujuk
Pelonggaran jQuery Sambungan Kesan Animasi

Selain itu, jika anda ingin menambah garis masa sebagai pemasa, anda boleh menambah kod berikut pada penghujung kandungan gelongsor:

 
<div class="tp-bannertimer"></div> 

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.