如何用原生JS实现年份选择器的轮播效果示例？

本文共计1102个文字，预计阅读时间需要5分钟。

前言：使用js实现一个年份轮换选择效果。思路：

一、布局：左右箭头使用实体字符+lt;和gt;，年份使用5个span。

二、使用flex布局，横向排列。

js逻辑：（注意：年份数据为2010,2011,2012,2013,2014）

1.初始化页面时，设置第一个span为选中状态。

2.点击左箭头，将选中span前一个span设置为选中状态，若第一个span是选中状态，则最后一个span设置为选中状态。

3.点击右箭头，将选中span后一个span设置为选中状态，若最后一个span是选中状态，则第一个span设置为选中状态。

前言

用js实现一个年份轮换选择效果。废话不多说，看图：

一、思路是什么？

• 布局： 左右箭头使用实体字符 < 和 > 年份5个span。使用用flex布局横向排列。
• js逻辑：（注：年份数据为number数组）
  • a> . 默认展示年份数据前5个。
  • b>. firstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5 刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。