@ctmobile/ui-revolving

    1.0.1 • Public • Published

    Revolving

    基本布局

    
    <div class="ct-revolving">
      <div class="ct-revolving-wrapper">
          <div class="ct-revolving-slide">Slide 1</div>
          ...
      </div>
    </div>
    
    
    • ct-revolving - 整体容器
      • ct-revolving-wrapper - 滚动项包装容器
        • ct-revolving-slide - 滚动项(多个)

    初始化

    
    import Revolving from '@ctmobile/ui-revolving';
    import '@ctmobile/ui-revolving/lib/revolving.less';
    
    const revolving = new Revolving(
      document.getElementById('ct-revolving'), {
        delay: 3000,
        direction: 'top',
      }
    );
    
    revolving.on('autoplayStart', () => { console.log('autoplayStart'); });
    revolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });
    revolving.on('autoplay', () => { console.log('autoplay'); });
    
    
    名称 说明
    {HtmlElement} - el 整体元素
    {object} - config

    配置

    speed {number} - 幻灯片之间的过渡持续时间(毫秒)

    delay {number} - 转换之间的延迟(以ms为单位)

    direction {string} - [left | right | top | bottom] 滚动方向

    loop {boolean} - 是否循环播放

    stopOnLastSlide {boolean} - 启用此参数并在到达最后一张幻灯片时停止自动播放(在循环模式下无效) |

    例子

    html

    
    <dl>
              <dt>direction - left</dt>
              <dd>
                <div class="ct-revolving" id="ct-revolving-left">
                  <div class="ct-revolving-wrapper">
                    <div class="ct-revolving-slide">Slide 1</div>
                    <div class="ct-revolving-slide">Slide 2</div>
                    <div class="ct-revolving-slide">Slide 3</div>
                    <div class="ct-revolving-slide">Slide 4</div>
                    <div class="ct-revolving-slide">Slide 5</div>
                    <div class="ct-revolving-slide">Slide 6</div>
                    <div class="ct-revolving-slide">Slide 7</div>
                    <div class="ct-revolving-slide">Slide 8</div>
                    <div class="ct-revolving-slide">Slide 9</div>
                    <div class="ct-revolving-slide">Slide 10</div>
                  </div>
                </div>
              </dd>
            </dl>
    
    <dl>
      <dt>direction - right</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-right">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
      </dd>
    </dl>
    
    <dl>
      <dt>direction - top</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-top">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
      </dd>
    </dl>
    
    <dl>
      <dt>direction - bottom</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-bottom">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
      </dd>
    </dl>
    
    <dl>
      <dt>speed - 过度时间</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-speed">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
      </dd>
    </dl>
    
    <dl>
      <dt>delay - 转换时间</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-delay">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
      </dd>
    </dl>
    
    <dl>
      <dt>api控制</dt>
      <dd>
        <div class="ct-revolving" id="ct-revolving-api">
          <div class="ct-revolving-wrapper">
            <div class="ct-revolving-slide">Slide 1</div>
            <div class="ct-revolving-slide">Slide 2</div>
            <div class="ct-revolving-slide">Slide 3</div>
            <div class="ct-revolving-slide">Slide 4</div>
            <div class="ct-revolving-slide">Slide 5</div>
            <div class="ct-revolving-slide">Slide 6</div>
            <div class="ct-revolving-slide">Slide 7</div>
            <div class="ct-revolving-slide">Slide 8</div>
            <div class="ct-revolving-slide">Slide 9</div>
            <div class="ct-revolving-slide">Slide 10</div>
          </div>
        </div>
    
        <div>
          <a class="ctmobile-ui-demo-button" id="startRevolving">start</a>
          <a class="ctmobile-ui-demo-button" id="stopRevolving">stop</a>
        </div>
      </dd>
    </dl>
    

    js

    
    import Revolving from '@ctmobile/ui-revolving';
    import '@ctmobile/ui-revolving/revolving.less';
    
    const leftRevolving = Revolving(
    document.getElementById('ct-revolving-left'), {
      direction: 'left',
    });
    
    const rightRevolving = Revolving(
    document.getElementById('ct-revolving-right'), {
      direction: 'right',
    });
    
    const topRevolving = Revolving(
    document.getElementById('ct-revolving-top'), {
      direction: 'top',
    });
    
    const bottomRevolving = Revolving(
    document.getElementById('ct-revolving-bottom'), {
      direction: 'bottom',
    });
    
    const speedRevolving = Revolving(
    document.getElementById('ct-revolving-speed'), {
      speed: 1000 * 3,
    });
    
    const delayRevolving = Revolving(
    document.getElementById('ct-revolving-delay'), {
      delay: 1000 * 3,
    });
    
    const apiRevolving = Revolving(
      document.getElementById('ct-revolving-api')
    );
    
    document.getElementById('startRevolving').addEventListener('click', () => {
      apiRevolving.start();
    });
    
    document.getElementById('stopRevolving').addEventListener('click', () => {
      apiRevolving.stop();
    });
    

    方法

    start - 播放

    stop - 暂停播放

    isRunning - 是否进行播放

    on( type, handler, ) - 注册事件

    • type-string 事件类型
    • handler-Function 事件句柄

    事件

    名称 说明
    autoplayStart 自动播放开始时将触发事件
    autoplayStopEvent 自动播放停止时将触发事件
    autoplay 使用自动播放更改幻灯片时将触发事件
    
    import Revolving from '@ctmobile/ui-revolving';
    import '@ctmobile/ui-revolving/lib/revolving.less';
    
    const revolving = Revolving(
      document.getElementById('ct-revolving'), {
        delay: 3000,
        direction: 'top',
      }
    );
    
    revolving.on('autoplayStart', () => { console.log('autoplayStart'); });
    revolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });
    revolving.on('autoplay', () => { console.log('autoplay'); });
    
    

    Install

    npm i @ctmobile/ui-revolving

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    169 kB

    Total Files

    11

    Last publish

    Collaborators

    • playerljc