https://github.com/zhangmingzhao1/a-native-js-slider
一个用原生JS造的轮播图插件 在线演示：
https://github.com/zhangmingzhao1/a-native-js-slider
slider slider-plugin
Last synced: 8 months ago
JSON representation
一个用原生JS造的轮播图插件 在线演示：
- Host: GitHub
- URL: https://github.com/zhangmingzhao1/a-native-js-slider
- Owner: ZhangMingZhao1
- License: mit
- Created: 2018-02-13T05:53:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-16T09:06:30.000Z (over 8 years ago)
- Last Synced: 2025-03-14T03:28:18.478Z (over 1 year ago)
- Topics: slider, slider-plugin
- Language: JavaScript
- Homepage: https://zhangmingzhao1.github.io/a-native-js-slider/index.html
- Size: 6.54 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# a native-js slider
# 一个无缝轮播图的小轮子 ( ͡° ͜ʖ ͡°)•ॢ
## 前言
自己弄这个轮子是来自之前vue做一个音乐播放器项目时，用到了一个第三方vue组件better-scroll，当时参考这个文档做轮播图的时候，发现slider-item真实渲染出来的多了两个节点，向作者提问了下，回答当传入 snap:{loop:true} 的时候，前后各 clone 一个节点，保证可以无缝循环轮播，那么多克隆这两个节点是怎么实现无无缝轮播图呢，查阅了相关原理，就做了下这个轮子。
## demo:
## 原理：
1. 所谓的无缝就是利用了两个辅助节点，eg：
5 1 2 3 4 5 1
其中首尾5,1就是辅助节点，为了实现过渡，当真实的5节点滑动到下一节点1时，其实是滑到了辅助1节点，此时再瞬间将位置指向真正的1节点，因为是相同的节点，此时外界就看不到发生的变化。
2. 利用了float和overflow，外界container设置成一张图片的大小，设置voerflow超出部分为hidden，第一个节点辅助节点5的left为0px，下一个就是真实的节点1为-600px(假设图片宽600px)，后面依次推。通过控制容器的left值来实现轮播。(向右偏移left值越来越小)
## 功能
1. 无缝轮播
2. 用递归实现自动播放，鼠标hover状态时停止自动播放，且浮现左右控制箭头，移开则消失。
3. 焦点dot的状态随图片轮播亮起和熄灭。且可以点击dot来自由切换跳转到相应的图片。
4. 轮播间隔时间和图片切换时间在代码里直接改相关时间常量即可。
## 优化
1. 点击当前的dot按钮，不会触发，不会执行内部响应的代码。避免无效的执行，节省内存。
2. 当快速频繁点击左偏移和右偏移箭头的时候，多次调用内部函数，有可能会导致在动画过程中图片index标号和dot按钮不匹配，出现错误，内部代码也多运行了很多次，浪费内存。在内部触发click的函数中增加一个标志位，动画期间click无效即可。
## 在线demo
[链接](https://zhangmingzhao1.github.io/a-native-js-slider/index.html)
## 有时间可以再用CSS3实现一遍