{"_id":"@ctmobile/ui-revolving-sd","_rev":"2-41d74187f4fdf5a0ab14234165b09641","name":"@ctmobile/ui-revolving-sd","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ctmobile/ui-revolving-sd","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","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"},"devDependencies":{"@ctsj/build":"^1.0.0","swiper":"^4.4.6"},"_id":"@ctmobile/ui-revolving-sd@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-4r+6ZkNH0izpnraMC9Aeim8/BZVUunoXqDzJJ2ShLbNBi1SvDBw64iNKjHp0I/u5ICNqKFQncq3crehMJo55GQ==","shasum":"58e4134defdc763444f17d3c7df8036fdbed0882","tarball":"https://registry.npmjs.org/@ctmobile/ui-revolving-sd/-/ui-revolving-sd-1.0.0.tgz","fileCount":5,"unpackedSize":18806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMT69CRA9TVsSAnZWagAAapIP/AjGQ8xeiiYwxGXehZZH\n5PdKT5vjUM4n2wAqX46af+A9jjWAMfpUdR0MwWWAwKt5XZNU/OON0rul+U8F\nOrjzbczha9p7JO7TwmG/Hw3ads1JvNxQr94HuEtDyTbkA8qQMkwpdRMm15eb\njBC0G1GSIxsxUCG3/IQLFVrwscOyXXLtX+xLy3kXsNxUooxDkU3SwqQtWA3n\noIWr2qoFASp0hYR/UNBdEIPwbawlrjrfhnInjrU/usXovz0XngLRxnq3YZaO\nQRVK31K8hw7eyAkCf56/n+64lCPXAutuCDj32FFfMTFPIyd9+EEMzmlYwjcM\neq6AdceoEEXYwbr/m07RYDZ7O8vN+u9oUevdTI1Y2UJ99VEqh/747HPm6qqx\nEYH1DbP8p5RFR0IQRbW8kf3iAvuHzQR32Gurmd2fwZ2zmBpPhh9cdKD15wZb\nGVxqHsbCrd3nkcRQFF/MQ/Dk7rJX2Snn8MiNF5JkP2rG8StBxzuKgkHaGcXT\nVS3eoUjr8ovP/2nD6Jwjyyk3iTwoAGyABPZaPRzFRyNPKcyRnqxSkx1cwfHW\nJ0MirK76bYifRmaJDeQoatL8g3Exi/OmgyKxE+GLPi1Sow04k5me8WDfwsXg\nxWnm7DPqEGIi8z17RmLRX7wi9J9U7efwiqdvfdYOvwfQKjTIiFbbjwHiIaBf\niFdq\r\n=FpYv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDCpzc6uqsqz12KOVi5nyL2Zi+GAA3UTNt0KOH6OQWMAiEAp0G2G4pYmAA/j1r1iL9Vq4qrnDduN4tYkU7sCseKcHw="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-revolving-sd_1.0.0_1563508411621_0.8023543765251144"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctmobile/ui-revolving-sd","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"},"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"},"devDependencies":{"@ctsj/build":"^1.0.11","swiper":"^4.4.6"},"_id":"@ctmobile/ui-revolving-sd@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-/J9EKDN2XILLSrqgjpWEbaVYDaSt8kAWv2GPlFUndDHIkcXtoLqkpp/2BIhBkc0T7PdqZPwHaia5UBrzIpFMcA==","shasum":"72b78861c98b86aaa23c60f68ddbd0c7c483a4e8","tarball":"https://registry.npmjs.org/@ctmobile/ui-revolving-sd/-/ui-revolving-sd-1.0.1.tgz","fileCount":5,"unpackedSize":18761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgfcQCRA9TVsSAnZWagAAZCcP/RZeKWIHP3W77HjK165A\n3TpTGYChPgk/ViaAnre+LGBrcwcq/zYVN2a14sCMPmceNUVm2WLoM5yTWv4Q\n4KGFenrRvkclJnJS4vrkgdoJqo3LIMDjVaLE5HuxJZx/musr2t37k6Wiv/3r\njO3fl5PV7TdWSJwehrbiIJ0Wv87b4DS0krK1gH+ZRzXx8UUMPwoUi0ndghol\nf4RZ3a1TIdIhxH94ZlQVsYkddGPvGqyp9v29ahuBwTqFMR2TTti40gW9/5iu\nz2N6a0+ulaDEBD+l1XDRe6XtWMwVIU7yUe5/5cD3aI9RVFa8zlDIeDWYFgGE\n3B3Y93zBReMHTHu2xZrBwrND3UeuQXpmBuoKHIBe+oAADXsR2gZxl1TQKhll\noFNBazmg6WdACsoc7U5ZfuO+HKZwradGTjxdybna7B6qmm66zi7qBp+P8xdG\nQh5gPFk/ydqCL1ys0ddpHM+PXJ19tFNMGhY7sgqo/RKGr5JlLsigt88Rk1e6\nrvgR3y6kL/5HQByRHmnQsDF7UJMTxW7ReetUUAzQNuwNepk5hcuOYByMRTk9\n2kYtUhf7i8qjZ/jQRb0TK4i9UakOYLiFBCXmfnVbS0dPNdh+fgoJIb64IRzX\nD5lgmFNoc3sa0glYZHUt+fYkC6cL6iGm9AYyxQsnRg1S1IMZ/SFDsMog3TXR\n1s/V\r\n=s/sj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArWXS9lG7CWzrxyEO26lFNbu1XvBYP9YVyXzFG2Zgj+AiEA8xRQpDY9B4OP2ylIJ5Y66G5zknrgmHURUzpUZ62FGeg="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-revolving-sd_1.0.1_1568798479622_0.7655193152137811"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-19T03:53:31.443Z","1.0.0":"2019-07-19T03:53:31.810Z","modified":"2022-04-05T02:04:09.506Z","1.0.1":"2019-09-18T09:21:19.766Z"},"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"}