使用js原生实现年份轮播选择效果实例
前言
用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="echarts.min.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div class="container"> <div id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span><</span> </div> <div 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> </div> <div id="right" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span>></span> </div> </div> <div class="content" id="content"> </div> </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(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 ? 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原生实现年份轮播选择内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS动态生成年份和月份实例代码
先看下js动态生成的年份,具体代码如下所示: function makeYear() { var year = document.getElementById("year"); var my = new Date(); var endYear = my.getFullYear();// 获取当前年份 for (var i = 1900; i <= endYear; i++) { year.options.add(new Option(i, i + '年')); } } 下面看下j
-
javaScript年份下拉列表框内容为当前年份及前后50年
javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 var endYear=myDate.
-
js输出阴历、阳历、年份、月份、周示例代码
复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta content="Microsoft FrontPage 4.0"><meta content="FrontPage.Editor.Document"><style ty
-
JS日期对象简单操作（获取当前年份、星期、时间）
本文实例为大家分享了JavaScript获取当前年份.星期.时间的方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //
-
一个可以显示当前年份以及生肖的js代码
function yeart(){ var now=new Date(); var year=now.getFullYear(); var ss=year-2008;//设定2008为初始年份 var ssc=ss%12; var ssyear=new Array("子鼠","丑牛","寅虎","卯兔","辰龙","巳蛇","午马","未羊",&q
-
IE与Firefox下javascript getyear年份的兼容性写法
IE与Firefox下javascript getyear年份不同浏览器 JavaScript 的getyear年份函数兼容性问题 先举个例子 用 Firefox 上一些网站会看到这样的提示 现在时间是 106年8月8日 而用 ie 浏览器的话就显示正常的 2006年8月8日 原因就是 javascript 的兼容性问题 var today = new date(); var year = today.getYear(); 在 Firefox 里面 getYear 返回的是 "当前年份-1900
-
使用js原生实现年份轮播选择效果实例
前言 用js实现一个年份轮换选择效果.废话不多说,看图: 一.思路是什么? 布局: 左右箭头使用实体字符 < 和 > 年份5个span.使用用flex布局横向排列. js逻辑:(注:年份数据为number数组) a> . 默认展示年份数据前5个. b>. firstIndex记录要显示的5个年份的起始索引.点击右侧箭头+1,直到firstIndex+5 刚好等于年份数组长度,不在递增.点击左侧箭头-1,直到firstIndex为0,不在递减.初始值为0. c>.selecte
-
js原生代码实现轮播图的实例讲解
轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同.我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好.在这里分享一下,用js原生代码,实现轮播图的常见效果!思路比较清晰,而且可重复性高,也几乎包含了现在网页上轮播实现的所有效果! 一.现在我们来看看它是什么样的效果,截一张图给大家看: 二.无论我们做什么特效,都要记住一个原则,先写静态的代码,再做动态的处理! 我们的轮播静态效果用html和css来实现: 1.为了代码的规范性,
-
使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
-
原生JS实现pc端轮播图效果
本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=
-
原生JS实现简单的轮播图效果
本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,
-
js实现简单的轮播图效果
本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"
-
js+css实现卡片轮播图效果
本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
-
原生js实现图片层叠轮播切换效果
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
-
js实现移动端轮播图效果
本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu