使用js原生實現年份輪播選擇效果例項
阿新 • • 發佈：2021-01-14
前言
用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原生實現年份輪播選擇內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！