用 javascript 实现走马灯动画效果
在 html <body> 标签中引入 <script src="carousel.min.js"></script>
npm install @trcat/[email protected]-
通过
new Carousel创建实例, 并传入对应options, 实例代码如下:<div class="carousel-container"> <div class="carousel-item">1</div> <div class="carousel-item">2</div> <div class="carousel-item">3</div> <div class="carousel-item">4</div> <div class="carousel-item">5</div> <div class="carousel-item">6</div> </div> <button class="left">←</button> <button class="right">→</button>
new Carousel({ el: ".carousel-container", // 必填, 渲染目标 space: 20, // 选填, 轮播内容间距 direction: "left", // 选填, 轮播方向 duration: 10000, // 选填, 单次轮播完成时间 dirBtn: { // 选填, 控制向左或向右轮播按钮 left: ".left", // 选填, 向左 right: ".right", // 选填, 向右 }, });
-
充当
carousel-container的标签以及carousel-item必须要有宽度设置 -
轮播的内容必须要加
carousel-itemclass, 并且并列放到充当carousel-container的标签中 -
虽然 JavaScript 代码通过 babel 编译, 但是没有添加 polyfill, 如需要请自行添加对应 polyfill。浏览器支持情况如下：
{ "browserslist": [ "last 2 versions", "> 1%", "ie >= 9" ], }
- 实现从左到右移动, 1 毫秒移动 1px
- 轮播显示最后一个内容就停止
- 实现循环
- 鼠标悬停轮播停止, 移开鼠标轮播继续
- 实现向左向右轮播动态切换
- 用 javascirpt 生成
wrapdiv 标签 - 用 javascript 生成克隆节点, 并计算 wrap 的宽度
- 用 ES6 class 改写 javascript 代码
- 让部分参数从组件外部传入
- 添加控制左右方向按钮参数(选填), 并调整代码
- 初步添加防护措施; 如果 item 不多, 则不会进行轮播
- 用 gulp 打包编译压缩 javascript 代码
- 添加 node 版本
- 提出因外框存在
display:none导致宽度计算不准的解决方案, 并配合调整代码 - 用
getComputedStyle实现宽度计算，解决当父元素隐藏导致宽度计算错误的问题 - 根据
box-sizing的不同优化宽度计算方式