So verwenden Sie JQuery Roundabout

WBOY
Freigeben: 2022-06-17 19:39:46
Original
1933 Leute haben es durchsucht

In jquery ist Roundabout ein jQuery-Plugin, das verwendet wird, um eine Reihe statischer HTML-Elemente in einen interaktiven Bereich umzuwandeln, der mit einem drehscheibenähnlichen Rotationseffekt flexibel angepasst werden kann. Dieses Plug-in kann ungeordnete Listen und andere Schleifen erstellen verschachtelte HTML-Strukturen Die Anzeige umfasst auch 3D-Konvertierung, Takteffekte, Klickzählung und andere Funktionen. Die Verwendungssyntax lautet „element object.roundabout({...});“.

So verwenden Sie JQuery Roundabout

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JQuery-Version 3.6.0, Dell G3-Computer.

So verwenden Sie jQuery Roundabout

Roundabout ist ein jQuery-Plugin, das problemlos ungeordnete Listen und andere verschachtelte HTML-Strukturen in einer Schleife anzeigen kann. Es verfügt über sehr leistungsstarke Anpassungsfunktionen. Es enthält viele Beispiele wie 3D-Konvertierung, Takteffekt, Klickanzahl, Bildschleifenanzeige

Roundabout ist ein jQuery-Plug-in, das eine Reihe statischer HTML-Elemente in einen interaktiven Bereich umwandeln kann, der mit einem Drehteller flexibel angepasst werden kann- wie Rotationseffekt. Es stehen verschiedene Spinformen zur Auswahl.

Beispiele sind wie folgt:

Zitatstildatei

<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/planting.css" />
Nach dem Login kopieren

js-Skriptdatei

<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.roundabout.min.js"></script>
Nach dem Login kopieren

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>
Nach dem Login kopieren

js

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

Video-Tutorial-Empfehlung: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery Roundabout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage