{"id":21074394,"url":"https://github.com/zhangmingzhao1/a-native-js-slider","last_synced_at":"2025-10-29T07:17:46.454Z","repository":{"id":98013468,"uuid":"121344508","full_name":"ZhangMingZhao1/a-native-js-slider","owner":"ZhangMingZhao1","description":"一个用原生JS造的轮播图插件                  在线演示：","archived":false,"fork":false,"pushed_at":"2018-02-16T09:06:30.000Z","size":6858,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-14T03:28:18.478Z","etag":null,"topics":["slider","slider-plugin"],"latest_commit_sha":null,"homepage":"https://zhangmingzhao1.github.io/a-native-js-slider/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZhangMingZhao1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-13T05:53:46.000Z","updated_at":"2020-07-22T09:31:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"292b2c29-e141-49fa-b62a-cbf61495e289","html_url":"https://github.com/ZhangMingZhao1/a-native-js-slider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZhangMingZhao1/a-native-js-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangMingZhao1%2Fa-native-js-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangMingZhao1%2Fa-native-js-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangMingZhao1%2Fa-native-js-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangMingZhao1%2Fa-native-js-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZhangMingZhao1","download_url":"https://codeload.github.com/ZhangMingZhao1/a-native-js-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangMingZhao1%2Fa-native-js-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000733,"owners_count":26082862,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["slider","slider-plugin"],"created_at":"2024-11-19T19:16:05.037Z","updated_at":"2025-10-08T23:26:11.154Z","avatar_url":"https://github.com/ZhangMingZhao1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# a native-js slider\n# 一个无缝轮播图的小轮子 ( ͡° ͜ʖ ͡°)•ॢ\n\n## 前言\n自己弄这个轮子是来自之前vue做一个音乐播放器项目时，用到了一个第三方vue组件better-scroll，当时参考这个文档做轮播图的时候，发现slider-item真实渲染出来的多了两个节点，向作者提问了下，回答当传入 snap:{loop:true} 的时候，前后各 clone 一个节点，保证可以无缝循环轮播，那么多克隆这两个节点是怎么实现无无缝轮播图呢，查阅了相关原理，就做了下这个轮子。\n\n\n## demo:\n![demo](https://github.com/ZhangMingZhao1/a-native-js-slider/blob/master/demoGIF.gif)\n\n\n## 原理：\n1. 所谓的无缝就是利用了两个辅助节点，eg：\n5 1 2 3 4 5 1\n其中首尾5,1就是辅助节点，为了实现过渡，当真实的5节点滑动到下一节点1时，其实是滑到了辅助1节点，此时再瞬间将位置指向真正的1节点，因为是相同的节点，此时外界就看不到发生的变化。\n\n2. 利用了float和overflow，外界container设置成一张图片的大小，设置voerflow超出部分为hidden，第一个节点辅助节点5的left为0px，下一个就是真实的节点1为-600px(假设图片宽600px)，后面依次推。通过控制容器的left值来实现轮播。(向右偏移left值越来越小)\n\n## 功能\n1. 无缝轮播\n2. 用递归实现自动播放，鼠标hover状态时停止自动播放，且浮现左右控制箭头，移开则消失。\n3. 焦点dot的状态随图片轮播亮起和熄灭。且可以点击dot来自由切换跳转到相应的图片。\n4. 轮播间隔时间和图片切换时间在代码里直接改相关时间常量即可。\n\n## 优化\n1. 点击当前的dot按钮，不会触发，不会执行内部响应的代码。避免无效的执行，节省内存。\n2. 当快速频繁点击左偏移和右偏移箭头的时候，多次调用内部函数，有可能会导致在动画过程中图片index标号和dot按钮不匹配，出现错误，内部代码也多运行了很多次，浪费内存。在内部触发click的函数中增加一个标志位，动画期间click无效即可。\n\n## 在线demo\n[链接](https://zhangmingzhao1.github.io/a-native-js-slider/index.html)\n\n## 有时间可以再用CSS3实现一遍\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangmingzhao1%2Fa-native-js-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhangmingzhao1%2Fa-native-js-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangmingzhao1%2Fa-native-js-slider/lists"}