Cara menggunakan bulatan jquery

Dalam jquery, bulatan digunakan untuk menukar set elemen HTML statik kepada kawasan interaktif yang boleh disesuaikan secara fleksibel dengan kesan putaran seperti meja putar Ia adalah pemalam jQuery ini tukar senarai tidak tertib dan lain-lain bersarang Paparan gelung struktur HTML juga termasuk penukaran 3D, kesan jam, pengiraan klik dan fungsi lain Sintaks penggunaan ialah "elemen object.roundabout({...});".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Cara menggunakan bulatan jquery

Bulat ialah pemalam jQuery yang boleh memaparkan senarai tidak tertib dan struktur HTML bersarang lain dalam satu gelung. Ia mempunyai fungsi penyesuaian yang sangat berkuasa. Ia disertakan dengan banyak contoh seperti penukaran 3D, kesan jam, kiraan klik, paparan gelung imej

Roundabout ialah pemalam jQuery yang boleh menukar satu set elemen HTML statik menjadi satu yang disesuaikan secara fleksibel dengan meja putar- seperti kesan putaran. Terdapat pelbagai bentuk putaran untuk dipilih.

Contohnya adalah seperti berikut:

Fail gaya petikan

<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/planting.css" />

fail skrip js

<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.roundabout.min.js"></script>

Html

<div class="" id="featured-area">
    <ul>
        <li>
            <img src="img/t1.png">
        </li>
        <li>
            <img src="img/t2.png">
        </li>
        <li>
            <img src="img/t3.png">
        </li>
    </ul>
</div>

js

 $(document).ready(function() {
     $('#featured-area ul').roundabout({
         easing: 'easeOutInCirc',
         duration: 600, // 运动速度                
         autoplay: true, // 自动播放               
         autoplayDuration: 1500, // 自动播放的时间               
         minOpacity: 0, //最小的透明度              
         maxOpacity: 1, //最大的透明度                
         reflect: false, // 为true时是从左向右移动，为false从右向左移动               
         startingChild: 3, // 默认的显示第几张图片              
         autoplayInitialDelay: 5000, // 从第几秒时，开始自动播放（默认毫秒）开始的第一次管用                
         autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放，为true不播放，false还自动播放               
         enableDrag: true // 在移动端可以拖拽播放          
     });
 });

Cadangan tutorial video: Tutorial video jQuery

Atas ialah kandungan terperinci Cara menggunakan bulatan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!