前言
用js实现一个年份轮换选择效果。废话不多说，看图：
一、思路是什么？
- 布局： 左右箭头使用实体字符 < 和 > 年份5个span。使用用flex布局横向排列。
- js逻辑：（注：年份数据为number数组）
- a> . 默认展示年份数据前5个。
- b>. firstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5 刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。
- c>.selectedIndex记录当前点击选中的年份索引。默认显示第一个即2021。初始值0。
- d>.firstIndex值发生变化，获取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4对应的年份，渲染到页面。并且这5个索引中某一个和selectedIndex相等，说明选中的年份，刚好在当前页面显示的年份当中。所以，与之相等的index对应的span添加选中样式，其他4个span移除选中样式。
- css：左右箭头逻辑，默认全部添加可点击样式：firstIndex=0，移除左可点击样式，firstIndex+5=年份数组长度，移除右可点击样式。
二、全部代码
1. html
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css" rel="external nofollow" type="text/css"/> <script type="text/javascript" src="/UploadFiles/2021-04-02/echarts.min.js">2.js
代码如下：
window.onload = function () { //首次渲染列表 initList(firstIndex); }; let yearArr = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]; yearArr.reverse(); //起始索引 let firstIndex = 0; //选中索引,默认选中第一个 let selectedIndex = 0; /** * 初始化列表 */ function initList(firstIndex) { //渲染页面span列表 let spanList = document.getElementById('wrap').getElementsByTagName('span'); for (let i = 0; i < spanList.length; i++) { let index = firstIndex + i; let span = spanList[i]; span.innerText = yearArr[index]; //选中样式添加和移除 if (index === selectedIndex) { span.classList.add('active'); } else { span.classList.remove('active') } } //页面内容显示值 document.getElementById('content').innerText = '当前选中年份：' + yearArr[selectedIndex]; } /** * 下一页 */ function clickNext(div) { if (firstIndex + 5 < yearArr.length) { firstIndex = firstIndex + 1; initList(firstIndex) } arrowActive(); } /* * 上一页 */ function clickBefore(div) { if (firstIndex > 0) { firstIndex = firstIndex - 1; initList(firstIndex) } arrowActive(); } /** * 选中 */ function selected(span) { let value = span.innerText; let index = yearArr.findIndex((el) => { return el + "" === value; }) selectedIndex = index !== -1 "htmlcode">body{ margin-top: 80px; } .container { display: flex; justify-content: center; align-items: center; margin: 10px; } .wrap { height: 40px; z-index: 1; color: black; display: flex; flex: 1; background: rgba(155,226,219,0.5); border-radius: 20px; margin-left: 20px; margin-right: 20px; } .wrap span { flex: 1; text-align: center; height: 40px; line-height: 40px; border-radius: 20px; } .active{ background: #1abc9c; color:#fff; } .arrow_left { left: 10px; color: green; padding: 0px 14px; border-radius: 50%; font-size: 30px; z-index: 2; } .arrow_right { right: 10px; color: green; padding: 0px 14px; border-radius: 50%; font-size: 30px; z-index: 2; } .arrow_active{ color: blue; } .content{ margin-left: 30px; }总结
每天记录一点，从小小菜鸟变小菜鸟！！！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“使用js原生实现年份轮播选择效果实例”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。