介绍 <李> <李> & lt; ! DOCTYPE html> & lt; html lang=癳n"祝辞& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title> Title
,,,& lt; link rel=皊tylesheet", href=https://www.yisu.com/zixun/index.css " type=" text/css "/>
这篇文章主要介绍了js实现年份轮播选择效果的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<人力资源颜色=" # 000000 "大??”;"/><>强前言
用js实现一个年份轮换选择效果。废话不多说,看图:
<强>一、思路是什么?
布局:左右箭头使用实体字符,lt;和和gt;年份5个。使用用flex布局横向排列。
<李>js逻辑:(注:年份数据为数量数组)
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相等,说明选中的年份,刚好在当前页面显示的年份当中,所以,与之相等的指数对应的跨度添加选中样式,其他4个跨度移除选中样式。
<李>css:左右箭头逻辑,默认全部添加可点击样式:firstIndex=0,移除左可点击样式,firstIndex + 5=年份数组长度,移除右可点击样式。
<强>二、全部代码
<强> 1。html
代码如下:
