使用js原生實現(xiàn)年份輪播選擇效果實例
用js實現(xiàn)一個年份輪換選擇效果。廢話不多說，看圖：
1. html
代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/index.css' rel='external nofollow' type='text/css'/> <script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/echarts.min.js'></script> <script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/index.js'></script></head><body><div class='container'> <div onclick='clickBefore()' unselectable='on' onselectstart='return false;'> <span><</span> </div> <div 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 onclick='clickNext()' unselectable='on' onselectstart='return false;'> <span>></span> </div></div><div 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原生實現(xiàn)年份輪播選擇效果的文章就介紹到這了,更多相關js原生實現(xiàn)年份輪播選擇內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！
相關文章：
1. python 如何在 Matplotlib 中繪制垂直線2. bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼3. ASP常用日期格式化函數(shù) FormatDate()4. python中@contextmanager實例用法5. html中的form不提交（排除）某些input 原創(chuàng)6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動輸入功能實現(xiàn)代碼8. 如何通過python實現(xiàn)IOU計算代碼實例9. 開發(fā)效率翻倍的Web API使用技巧10. vue使用moment如何將時間戳轉為標準日期時間格式
網(wǎng)公網(wǎng)安備