Example of using js to natively implement year carousel selection effect

Preface

Use js to achieve a year rotation selection effect. Without further ado, let’s take a look at the pictures:

1. What is the idea?

Layout: Left and right arrows use entity characters < and > Year 5 spans. Use flex layout to arrange horizontally.
js logic: (Note: the year data is a number array)
- a> . By default, the first 5 year data are displayed.
- b>. firstIndex records the starting index of the 5 years to be displayed. Click the right arrow +1 until firstIndex+5 is exactly equal to the length of the year array and no longer increases. Click the left arrow -1 until firstIndex is 0 and no longer decreases. The initial value is 0.
- c>.selectedIndex records the index of the year currently clicked and selected. The first one, 2021, is displayed by default. Initial value: 0.
- d>.firstIndex value changes, get the years corresponding to firstIndex, firstIndex+1, firstIndex+2…firstIndex+4, and render them to the page. And one of these five indexes is equal to selectedIndex, which means that the selected year is among the years displayed on the current page. Therefore, the span corresponding to the same index adds the selected style, and the other 4 spans remove the selected style.
css: left and right arrow logic, all clickable styles are added by default: firstIndex=0, remove the left clickable style, firstIndex+5=year array length, remove the right clickable style.

2. All codes

1. html

The code is as follows:

<!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

The code is as follows:

window.onload = function () {
 //First render list initList(firstIndex);
};

let yearArr = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021];
yearArr.reverse();

//Starting index let firstIndex = 0;
//Selected index, the first one is selected by default let selectedIndex = 0;


/**
 * Initialization list */
function initList(firstIndex) {

 //Rendering page span list 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];

 //Select style to add and remove if (index === selectedIndex) {
  span.classList.add('active');
 } else {
  span.classList.remove('active')
 }
 }
 //Page content display value document.getElementById('content').innerText = 'Currently selected year:' + yearArr[selectedIndex];
}

/**
 * Next page */
function clickNext(div) {
 if (firstIndex + 5 < yearArr.length) {
 firstIndex = firstIndex + 1;
 initList(firstIndex)
 }
 arrowActive();
}

/*
* Previous page */
function clickBefore(div) {
 if (firstIndex > 0) {
 firstIndex = firstIndex - 1;
 initList(firstIndex)
 }
 arrowActive();
}

/**
 * Select */
function selected(span) {
 let value = span.innerText;
 let index = yearArr.findIndex((el) => {
 return el + "" === value;
 })
 selectedIndex = index !== -1 ? index : 0;
 initList(firstIndex);
}

/**
 * Left and right arrows activated * firstIndex = 0: right activated, left not * firstIndex = length-5: left activated, right not * Others: all activated */
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

The code is as follows:

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;
}

Summarize

Record a little bit every day and grow from a rookie to a rookie! ! !

This is the end of this article about using js natively to implement the year carousel selection effect. For more relevant js native implementation of year carousel selection content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

The javascript year drop-down list box contains the current year and the 50 years before and after.
Simple operation of JS date object (get current year, week, time)
Compatibility of javascript getyear in IE and Firefox
js output lunar calendar, solar calendar, year, month, week sample code
A js code that can display the current year and zodiac sign
JS dynamically generates year and month example code

<<: A brief introduction to Vue filters, lifecycle functions and vue-resource

>>: How to implement vue page jump