使用js原生實現年份輪播選擇效果實例

Posted on by

前言

用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>&lt;</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>&gt;</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原生實現年份輪播選擇內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：