{"id":17880599,"url":"https://github.com/a7650/carousel-z","last_synced_at":"2025-04-03T01:23:39.097Z","repository":{"id":57194543,"uuid":"189588529","full_name":"a7650/carousel-z","owner":"a7650","description":"js 轮播图插件","archived":false,"fork":false,"pushed_at":"2020-12-07T01:52:31.000Z","size":120,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T02:15:32.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a7650.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-31T12:14:35.000Z","updated_at":"2021-08-17T17:23:04.000Z","dependencies_parsed_at":"2022-09-16T01:35:44.186Z","dependency_job_id":null,"html_url":"https://github.com/a7650/carousel-z","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7650%2Fcarousel-z","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7650%2Fcarousel-z/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7650%2Fcarousel-z/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7650%2Fcarousel-z/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a7650","download_url":"https://codeload.github.com/a7650/carousel-z/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246918178,"owners_count":20854766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-28T12:26:26.489Z","updated_at":"2025-04-03T01:23:39.075Z","avatar_url":"https://github.com/a7650.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛸carousel\n### 一个轮播图插件，通过简单的配置参数就可以实现一个轮播图，同时可以和css3结合，自定义切换动画\n[npm v1.0.5][npm-url] \u0026emsp; [git地址][git-url]\n\n\n[npm-url]: https://www.npmjs.com/package/carousel-z\n[git-url]: https://github.com/a7650/carousel-z.git\n### 使用方法\n\n#### 安装\n`npm install carousel-z`\n\n#### 使用\n`import Carousel from \"carousel-z\"`\n\n`var myCarousel = new Carousel(options)`\n\n`myCarousel.picPlay()`\n\n参数options为一个对象，设定了轮播图的各种参数。\n\n#### options的属性示例\n##### 🍊parentNode(必须)(string || object)\u003c/font\u003e\n \n     parentNode为将要挂载的dom对象，即轮播图挂载在该dom上，此参数必须传入，可以是一个css选择器或者dom对象。\n     \n##### 🍊width(必须)(string || number)\n\n    width为轮播图容器的宽度，即将要显示的单张图片的宽度。\n    此参数必须传入，可以是数值类型或字符串类型，数值类型时默认单位为\"px\"。\n    \n##### 🍊height(必须)(string || number)\n\n    同\"width\"。\n    \n##### 🍊duration(必须)(string || number)\n\n    duration为图片播放的间隔，此参数必须传入，可以是数值类型或字符串类型。单位为\"ms\"。\n    \n##### 🍊transitionTime(可选)(string || number)\n\n    transitionTime为图片切换动画的时长，单位为\"s\"\n\n##### 🍊img(必须)(array)\n\n    img为所有图片的数据，数组类型，数组的每一项为单个图片数据，是对象类型，对象属性如下：\n      {\n        href:\"链接，即用户点击该图片要跳转的链接\",\n        src:\"图片的src，可选\",\n        tipMes:\"提示信息,可选，但在使用tip时必须参在\"\n      }\n\n##### 🍊hover(可选)(object)\n\n    hover控制鼠标在轮播图上时的行为，有如下属性：\n      hover.pause:鼠标悬停时是否停止播放图片，boolean类型，默认为false。\n     \n##### 🍊hidden(可选)(boolean)\n\n    超出容器范围时是否隐藏图片，默认为true，即隐藏。\n\n##### 🍊transitionName(可选)(string)\n\n    你可以通过设置该属性来指定类名，`transitionName-enter`和`transitionName-leave`(例如你设置transitionName为\"cir\"，\n    则相应的类名为\"cir-enter\"和\"cir-leave\")；\n\n    之后你就可以在css中添加\"transitionName-enter\"和\"transitionName-leave\"的样式，他们分别表示图片在\"进入容器范围之前\n    的状态\"和\"离开容器范围之后的状态\"；\n\n    当然如果你没有设置这个属性的话，你也有默认的类名来使用，他们分别是\"carousel-default-enter\"和\"carousel-default-leave\"\n\n    如果你设置了transitionName属性，则默认的类名将不能使用，因为他们会被默认的类名覆盖掉。\n\n##### 🍊dots(可选)(object)\n\n    dots设置图片的控制条。主要有以下属性：\n      dots.show:是否显示控制条，默认false，即不显示。\n      dots.ordinaryColor:非当前图片的dot的颜色，默认为半透明的黑色。\n      dots.activeColor:当前图片的dot的颜色，默认白色。\n      dots.dotSize:dot的直径，默认10px。\n      dots.bottomDistance:控制条与底部的距离，默认20px。\n      dots.transition:dot的样式变化时间，默认0s。\n      dots.spacing:dot间隔，默认10px。\n      turn：点击dot是否跳转到对应图片，默认true。\n      \n##### 🍊tip(可选)(object)\n\n    tip设置图标在图片上悬浮时的提示框属性，有如下属性：\n      tip.show:是否显示提示框。该参数为true时，img中图片数据的tipMes必须存在。\n      backgroundColor:提示框背景颜色，默认为半透明的黑色。\n      fontColor:提示框字体，默认为白色。\n      \n#### Wheelplant的方法(以下方法可以在Carousel的实例上使用)\n\nmyCarousel.picPlay(),播放图片，初始化后需调用此方法来开始播放图片。\n\nmyCarousel.picPause(),暂停播放。\n\nmyCarousel.turn(to,from),参数为图片的index，从from跳转到to。\n\nmyCarousel.isanimated(),判断是否处于动画状态，返回true或false。\n\n\n\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7650%2Fcarousel-z","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa7650%2Fcarousel-z","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7650%2Fcarousel-z/lists"}