Home  >  Article  >  Web Front-end  >  How to use jquery roundabout

How to use jquery roundabout

WBOY
WBOYOriginal
2022-06-13 16:43:271910browse

In jquery, roundabout is used to convert a set of static HTML elements into an interactive area that can be flexibly customized with a turntable-like rotating effect. It is a jQuery plug-in; this plug-in can convert unordered lists and other nested The HTML structure loop display also includes 3D conversion, clock effects, click counting and other functions. The usage syntax is "element object.roundabout({...});".

How to use jquery roundabout

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

How to use jquery roundabout

Roundabout is a jQuery plug-in that easily displays unordered lists and other nested HTML structures in a loop. It has very powerful customization functions. It comes with many examples such as 3D conversion, clock effect, click count, image loop display

Roundabout is a jQuery plug-in that can convert a set of static HTML elements into a flexibly customized one with a turntable-like rotation effect. interactive area. There are a variety of spin shapes to choose from.

Examples are as follows:

Reference style file

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

js script file

<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() {
     $(&#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 // 在移动端可以拖拽播放          
     });
 });

Video tutorial recommendation:jQuery video tutorial

The above is the detailed content of How to use jquery roundabout. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn