Comment utiliser le rond-point jquery

Dans jquery, roundabout est un plug-in jQuery utilisé pour convertir un ensemble d'éléments HTML statiques en une zone interactive qui peut être personnalisée de manière flexible avec un effet de rotation semblable à celui d'une platine. Ce plug-in peut boucler des listes non ordonnées et d'autres ; structures HTML imbriquées L'affichage comprend également la conversion 3D, les effets d'horloge, le comptage des clics et d'autres fonctions. La syntaxe d'utilisation est "element object.roundabout({...});".

L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery version 3.6.0, ordinateur Dell G3.

Comment utiliser jquery roundabout

roundabout est un plug-in jQuery, qui peut facilement afficher des listes non ordonnées et d'autres structures HTML imbriquées dans une boucle. Il possède des fonctions de personnalisation très puissantes. Il est livré avec de nombreux exemples tels que la conversion 3D, l'effet d'horloge, le nombre de clics, l'affichage de la boucle d'image

Roundabout est un plug-in jQuery qui peut convertir un ensemble d'éléments HTML statiques en une zone interactive qui peut être personnalisée de manière flexible avec un plateau tournant. comme l'effet de rotation. Il existe une variété de formes de spin parmi lesquelles choisir.

Les exemples sont les suivants :

Fichier de style de citation

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

fichier de script 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 // 在移动端可以拖拽播放          
     });
 });

Recommandation de didacticiel vidéo : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!