Jquery 로터리를 사용하는 방법

jquery에서 roundabout은 정적 HTML 요소 집합을 턴테이블과 같은 회전 효과로 유연하게 사용자 정의할 수 있는 대화형 영역으로 변환하는 데 사용되는 jQuery 플러그인입니다. 이 플러그인은 순서가 지정되지 않은 목록과 기타 항목을 반복할 수 있습니다. 중첩된 HTML 구조 디스플레이에는 3D 변환, 시계 효과, 클릭 계산 및 기타 기능도 포함됩니다. 사용 구문은 "element object.roundabout({...});"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, jquery 버전 3.6.0, Dell G3 컴퓨터.

jquery roundabout 사용 방법

roundabout은 순서가 지정되지 않은 목록과 기타 중첩된 HTML 구조를 루프에 쉽게 표시할 수 있는 jQuery 플러그인입니다. 매우 강력한 사용자 정의 기능이 있습니다. 3D 변환, 시계 효과, 클릭 횟수, 이미지 루프 표시 등 많은 예가 함께 제공됩니다.

Roundabout은 정적 HTML 요소 세트를 턴테이블을 사용하여 유연하게 사용자 정의할 수 있는 대화형 영역으로 변환할 수 있는 jQuery 플러그인입니다. 회전 효과처럼요. 선택할 수 있는 다양한 스핀 모양이 있습니다.

예제는 다음과 같습니다.

인용 스타일 파일

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

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="/static/imghwm/default1.png"  data-src="img/t1.png"  class="lazy"   alt="Jquery 로터리를 사용하는 방법" >
        </li>
        <li>
            <img  src="/static/imghwm/default1.png"  data-src="img/t2.png"  class="lazy"   alt="Jquery 로터리를 사용하는 방법" >
        </li>
        <li>
            <img  src="/static/imghwm/default1.png"  data-src="img/t3.png"  class="lazy"   alt="Jquery 로터리를 사용하는 방법" >
        </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 // 在移动端可以拖拽播放          
     });
 });

동영상 튜토리얼 추천: jQuery 동영상 튜토리얼

위 내용은 Jquery 로터리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!