相关免费学习推荐：javascript（视频）
文章目录
前言一、思路是什么？二、全部代码1. html2.js2.css总结前言
用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" type="text/css"/> <script type="text/javascript" src="echarts.min.js"></script> <script type="text/javascript" src="index.js"></script></head><body><p class="container"> <p id="left" class="arrow_left" onclick="clickbefore()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span><</span> </p> <p id="wrap" class="wrap"> <span onclick="selected(this)">1</span> <span onclick="selected(this)">2</span> <span onclick="selected(this)">3</span> <span onclick="selected(this)">4</span> <span onclick="selected(this)">5</span> </p> <p id="right" class="arrow_right arrow_active" onclick="clicknext()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span>></span> </p></p><p class="content" id="content"></p></body></html>
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(p) { if (firstindex + 5 < yeararr.length) { firstindex = firstindex + 1; initlist(firstindex) } arrowactive();}/** 上一页 */function clickbefore(p) { 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 ? index : 0; initlist(firstindex);}/** * 左右箭头激活 * firstindex = 0: 右激活 左不 * firstindex = length-5：左激活 右不 * 其他：全激活 */function arrowactive() { let left = document.getelementbyid('left') let right = document.getelementbyid('right') left.classlist.add('arrow_active'); right.classlist.add('arrow_active'); if (firstindex === 0) { left.classlist.remove('arrow_active'); } else if (firstindex === yeararr.length - 5) { right.classlist.remove('arrow_active'); }}
2.css
代码如下：
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;}
总结
每天记录一点，从小小菜鸟变小菜鸟！！！
相关免费学习推荐：js视频教程
以上就是原生js实现年份轮播选择效果的详细内容。