js實現(xiàn)年份輪播選擇效果的示例

這篇文章主要介紹了js實現(xiàn)年份輪播選擇效果的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、成都全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、手機網(wǎng)站開發(fā)、微商城、網(wǎng)站托管及企業(yè)網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都葡萄架行業(yè)客戶提供了網(wǎng)站營銷服務(wù)。

前言

用js實現(xiàn)一個年份輪換選擇效果。廢話不多說，看圖：

一、思路是什么？

布局：左右箭頭使用實體字符 < 和 > 年份5個span。使用用flex布局橫向排列。
js邏輯：（注：年份數(shù)據(jù)為number數(shù)組）

a> . 默認展示年份數(shù)據(jù)前5個。
b>. firstIndex記錄要顯示的5個年份的起始索引。點擊右側(cè)箭頭+1，直到firstIndex+5 剛好等于年份數(shù)組長度，不在遞增。點擊左側(cè)箭頭-1，直到firstIndex為0，不在遞減。初始值為0。
c>.selectedIndex記錄當(dāng)前點擊選中的年份索引。默認顯示第一個即2021。初始值0。
d>.firstIndex值發(fā)生變化，獲取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4對應(yīng)的年份，渲染到頁面。并且這5個索引中某一個和selectedIndex相等，說明選中的年份，剛好在當(dāng)前頁面顯示的年份當(dāng)中。所以，與之相等的index對應(yīng)的span添加選中樣式，其他4個span移除選中樣式。

css：左右箭頭邏輯，默認全部添加可點擊樣式：firstIndex=0，移除左可點擊樣式，firstIndex+5=年份數(shù)組長度，移除右可點擊樣式。

二、全部代碼

1. 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')
        }
    }
    //頁面內(nèi)容顯示值
    document.getElementById('content').innerText = '當(dāng)前選中年份：' + yearArr[selectedIndex];}/**
 * 下一頁
 */function clickNext(p) {
    if (firstIndex + 5 < yearArr.length) {
        firstIndex = firstIndex + 1;
        initList(firstIndex)
    }
    arrowActive();}/*
* 上一頁
 */function clickBefore(p) {
    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)年份輪播選擇效果的示例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享名稱：js實現(xiàn)年份輪播選擇效果的示例
本文網(wǎng)址：http://m.jiaotiyi.com/article/ppgscj.html

網(wǎng)站建設(shè)知識

js實現(xiàn)年份輪播選擇效果的示例

其他資訊