{"_id":"@ctmobile/ui-revolving","_rev":"2-ec64124a7f3b1c19b638c60007d78877","name":"@ctmobile/ui-revolving","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ctmobile/ui-revolving","version":"1.0.0","description":"支持移动端的UI组件-Revolving","main":"lib/revolving.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild --type buildpackage","buildumd":"ctcopy ../src src && ctbuild --type buildumd --packagename revolving","link":"npm link @ctsj/build"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["revolving","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0","swiper":"^4.4.6"},"devDependencies":{"@ctsj/build":"^1.0.0"},"_id":"@ctmobile/ui-revolving@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-6SrAr2lJd7NKvi2Fm0hxuWTRJ4/v4OHpII3UPhxHotK64DUBEx+d0WMbo3OnXCtKcJofw14y8pT9IuXgc4qe2g==","shasum":"27c8bd77b0dc10960e86adc9d5a07bebffd7eb09","tarball":"https://registry.npmjs.org/@ctmobile/ui-revolving/-/ui-revolving-1.0.0.tgz","fileCount":11,"unpackedSize":166200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMT7PCRA9TVsSAnZWagAAJsMP/jMg7/SBGpdfUi+0Pxwu\nA685uAD4F3rfvtBRXKE/rbSarV03s7Zb0mS2B5LaUF9veaFlXhZ/nCN/fu2s\nXQIwbHFXozpVFQSlQ9HrggdrQRkzetvy8rS3Ti6ai6WT8Ib12X89S/405q3f\nTKkCNrdAzx9xCumZLfGLXiTfID9wrHox7Zcq8R/fgkMkIjNsV16NJXL5xztY\nX5SV9YdnyAG+vOlJE/AWKQWuoOh9Wk4B43tLDHn7EKX2Lg2uxayHiGhDh4HJ\nGoo9496oNUVWrT0eyRjE548G4NryPgEIhOQWTzIT7K+1BlvSZ9GF5+oZ5Pbh\nCxDk8l70nwwq0NBMelH22vDmwHnsvAxQr8pjHHL6x5QibwG90UBDco9ta1lH\nGYvgMfaou1aR3NtHFJZK5ow+a3lnnIKN2B2Xkdl3onVflCvE4qnI9n9NYvJC\nmOlScpTESmDSAX8+wvcIJ0mMl0zCa0XOOTt/RhZ8ZXyD6+DrH731Oo1Yt2Bo\n8WnPPmSCw4o7PeHqq8ICSwONOGAtXq9cSeBbaCMOiG2cBdTS+4ZV1WwCynct\ninQcCaOQ3Bwz/FFXZbaTdWY27J2JX43D42Q5gj/2wrFrIiWVY6z2wyIqidnx\nw5iKIkrsZbEazevWEPrGGjXO6cs43ICaF2i89tX8tm2BjiTiJmFGgOB9NLyj\nuP0n\r\n=SFJd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFftjgtVkOOOS+Yg3PvNwYegeje23VGQKU0+5mCm0HPTAiEA843ffcZHZ/gPL2TaEKPlvNwOfeCiRU08ZZEtU3HkqFw="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-revolving_1.0.0_1563508430884_0.08448815686199018"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctmobile/ui-revolving","version":"1.0.1","description":"支持移动端的UI组件-Revolving","main":"lib/revolving.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild buildpackage","buildumd":"ctcopy ../src src && ctbuild buildumd -p revolving"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["revolving","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0","swiper":"^4.4.6"},"devDependencies":{"@ctsj/build":"^1.0.11"},"_id":"@ctmobile/ui-revolving@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-o9C3yLx6+/3U98Py76lmXhZamrES5G2gW9c9uegqlvvT1lr7pCvurSYVzfshw7dawwds6GKWKfKB4pKJ9pxm6w==","shasum":"fae8a92caa1a177278dcaf9a6e18ca2f98f43401","tarball":"https://registry.npmjs.org/@ctmobile/ui-revolving/-/ui-revolving-1.0.1.tgz","fileCount":11,"unpackedSize":169076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgfeVCRA9TVsSAnZWagAA0zMP/3ANsjvOeoTkvGSBFuFr\nNz71ivdVym3qXQBCnb+ODbUUJwFOEEi7/+j65ZkHw0s/MTV3S6Ngkhsl/Y3/\nOHL49jD1d0bwmZM57+jfTPHdyd1gULW9d2WF8unKmLbnnwPL4+b2mdu/vndr\nLNMwzfSHNz2499gayYIqsZK41NJzOak8gsvtMstl4HxEjwJ4lmB+Pm7jO7yi\nD4rtZ0CaWNNA4Je5SsF4yhAQe8EvwI9GxEU6JS1K2HKAlk4+gcVCFN/HM6Y4\n45DLQO8ZAdzmxtdm+m78FKpzIdgovazbC6NSRYGrwIzG7Zrk94ynu+r733PI\n0Va0PSPdOY2e7idrMUGVF/YJaqR0ugZpzD/E2vwIKbaOHSM2/97onN6wQ2N+\nRoNOn29J23frV/PmLW5M75tqd4hCJJx4IlY4f6Ms3AbrrihXP5LnKAmU4MSD\nMJbMDaXU7xsjai60pzY8qpm/vsA9colGMBhpuoAIeAp7Pj6W62qlPTNz4R9G\nsnqQCu8D/yePGNRrJxxC/hbgC9onW+ykgHptd4UJWBfN/KCaiCjYWVjFZV4R\n+/DmQgDNMAYqmEqIES/G/PUrVAcoZKY+FjlSmZfHfQIVA36RCVsa9E/aSoOI\ny0l43Ovdzy/98w4wB78uf5Dk35hyC7lNUh5NM+cLbnO3ZPXuyQqm4yhqV6Iw\nemTN\r\n=Qr44\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGav2CRlTz6vIw1PdFwx2vlrW3+MDMpa2CxaJz6TlqKeAiEA3RC9NX+oRDFU4hgqDZzZrubRjjmxsP0Baef6oFLPPw8="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-revolving_1.0.1_1568798610687_0.9774000064371704"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-19T03:53:50.712Z","1.0.0":"2019-07-19T03:53:51.015Z","modified":"2022-04-05T02:04:09.349Z","1.0.1":"2019-09-18T09:23:30.846Z"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"description":"支持移动端的UI组件-Revolving","homepage":"https://github.com/playerljc/CTMobile-UI#readme","keywords":["revolving","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"author":{"name":"playerljc","email":"playerljc@163.com"},"bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"license":"MIT","readme":"# Revolving\r\n\r\n* [基本布局](#revolving-layout)\r\n* [初始化](#revolving-initial)\r\n* [例子](#revolving-demo)\r\n* [方法](#revolving-methods)\r\n* [事件](#revolving-events)\r\n  - [autoplayStart](#revolving-events-autoplaystart)\r\n  - [autoplayStopEvent](#revolving-events-autoplaystopevent)\r\n  - [autoplay](#revolving-events-autoplay)\r\n\r\n## 基本布局\r\n\r\n```\r\n\r\n<div class=\"ct-revolving\">\r\n  <div class=\"ct-revolving-wrapper\">\r\n      <div class=\"ct-revolving-slide\">Slide 1</div>\r\n      ...\r\n  </div>\r\n</div>\r\n\r\n```\r\n\r\n* ct-revolving - 整体容器\r\n  - ct-revolving-wrapper - 滚动项包装容器\r\n    + ct-revolving-slide - 滚动项(多个)\r\n\r\n## 初始化\r\n\r\n```\r\n\r\nimport Revolving from '@ctmobile/ui-revolving';\r\nimport '@ctmobile/ui-revolving/lib/revolving.less';\r\n\r\nconst revolving = new Revolving(\r\n  document.getElementById('ct-revolving'), {\r\n    delay: 3000,\r\n    direction: 'top',\r\n  }\r\n);\r\n\r\nrevolving.on('autoplayStart', () => { console.log('autoplayStart'); });\r\nrevolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });\r\nrevolving.on('autoplay', () => { console.log('autoplay'); });\r\n\r\n```\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| {HtmlElement} - el |  整体元素 |\r\n| {object} - config |\r\n\r\n配置\r\n\r\nspeed {number} - 幻灯片之间的过渡持续时间（毫秒）\r\n\r\ndelay {number} - 转换之间的延迟（以ms为单位）\r\n\r\ndirection {string} - [left | right | top | bottom] 滚动方向\r\n\r\nloop {boolean} - 是否循环播放\r\n\r\nstopOnLastSlide {boolean} - 启用此参数并在到达最后一张幻灯片时停止自动播放（在循环模式下无效）  |\r\n\r\n## 例子\r\n\r\n#### html\r\n\r\n```\r\n\r\n<dl>\r\n          <dt>direction - left</dt>\r\n          <dd>\r\n            <div class=\"ct-revolving\" id=\"ct-revolving-left\">\r\n              <div class=\"ct-revolving-wrapper\">\r\n                <div class=\"ct-revolving-slide\">Slide 1</div>\r\n                <div class=\"ct-revolving-slide\">Slide 2</div>\r\n                <div class=\"ct-revolving-slide\">Slide 3</div>\r\n                <div class=\"ct-revolving-slide\">Slide 4</div>\r\n                <div class=\"ct-revolving-slide\">Slide 5</div>\r\n                <div class=\"ct-revolving-slide\">Slide 6</div>\r\n                <div class=\"ct-revolving-slide\">Slide 7</div>\r\n                <div class=\"ct-revolving-slide\">Slide 8</div>\r\n                <div class=\"ct-revolving-slide\">Slide 9</div>\r\n                <div class=\"ct-revolving-slide\">Slide 10</div>\r\n              </div>\r\n            </div>\r\n          </dd>\r\n        </dl>\r\n\r\n<dl>\r\n  <dt>direction - right</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-right\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>direction - top</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-top\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>direction - bottom</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-bottom\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>speed - 过度时间</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-speed\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>delay - 转换时间</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-delay\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>api控制</dt>\r\n  <dd>\r\n    <div class=\"ct-revolving\" id=\"ct-revolving-api\">\r\n      <div class=\"ct-revolving-wrapper\">\r\n        <div class=\"ct-revolving-slide\">Slide 1</div>\r\n        <div class=\"ct-revolving-slide\">Slide 2</div>\r\n        <div class=\"ct-revolving-slide\">Slide 3</div>\r\n        <div class=\"ct-revolving-slide\">Slide 4</div>\r\n        <div class=\"ct-revolving-slide\">Slide 5</div>\r\n        <div class=\"ct-revolving-slide\">Slide 6</div>\r\n        <div class=\"ct-revolving-slide\">Slide 7</div>\r\n        <div class=\"ct-revolving-slide\">Slide 8</div>\r\n        <div class=\"ct-revolving-slide\">Slide 9</div>\r\n        <div class=\"ct-revolving-slide\">Slide 10</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div>\r\n      <a class=\"ctmobile-ui-demo-button\" id=\"startRevolving\">start</a>\r\n      <a class=\"ctmobile-ui-demo-button\" id=\"stopRevolving\">stop</a>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n```\r\n\r\n#### js\r\n\r\n```\r\n\r\nimport Revolving from '@ctmobile/ui-revolving';\r\nimport '@ctmobile/ui-revolving/revolving.less';\r\n\r\nconst leftRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-left'), {\r\n  direction: 'left',\r\n});\r\n\r\nconst rightRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-right'), {\r\n  direction: 'right',\r\n});\r\n\r\nconst topRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-top'), {\r\n  direction: 'top',\r\n});\r\n\r\nconst bottomRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-bottom'), {\r\n  direction: 'bottom',\r\n});\r\n\r\nconst speedRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-speed'), {\r\n  speed: 1000 * 3,\r\n});\r\n\r\nconst delayRevolving = Revolving(\r\ndocument.getElementById('ct-revolving-delay'), {\r\n  delay: 1000 * 3,\r\n});\r\n\r\nconst apiRevolving = Revolving(\r\n  document.getElementById('ct-revolving-api')\r\n);\r\n\r\ndocument.getElementById('startRevolving').addEventListener('click', () => {\r\n  apiRevolving.start();\r\n});\r\n\r\ndocument.getElementById('stopRevolving').addEventListener('click', () => {\r\n  apiRevolving.stop();\r\n});\r\n```\r\n\r\n## 方法\r\n\r\nstart - 播放\r\n\r\nstop - 暂停播放\r\n\r\nisRunning - 是否进行播放\r\n\r\non( type, handler, ) - 注册事件\r\n\r\n* type-string 事件类型\r\n* handler-Function 事件句柄\r\n\r\n## 事件\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| autoplayStart |  自动播放开始时将触发事件 |\r\n| autoplayStopEvent |  自动播放停止时将触发事件 |\r\n| autoplay |  使用自动播放更改幻灯片时将触发事件 |\r\n\r\n```\r\n\r\nimport Revolving from '@ctmobile/ui-revolving';\r\nimport '@ctmobile/ui-revolving/lib/revolving.less';\r\n\r\nconst revolving = Revolving(\r\n  document.getElementById('ct-revolving'), {\r\n    delay: 3000,\r\n    direction: 'top',\r\n  }\r\n);\r\n\r\nrevolving.on('autoplayStart', () => { console.log('autoplayStart'); });\r\nrevolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });\r\nrevolving.on('autoplay', () => { console.log('autoplay'); });\r\n\r\n```\r\n","readmeFilename":"README.md"}