扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >JavaScript如何实现年份轮播选择效果
  • 487

0
分享到

JavaScript如何实现年份轮播选择效果

2023-06-27 10:06:57 487人浏览 薄情痞子
摘要

这篇文章主要讲解了“javascript如何实现年份轮播选择效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现年份轮播选择效果”吧！前言用 js 实现一个年份轮换

这篇文章主要讲解了“javascript如何实现年份轮播选择效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现年份轮播选择效果”吧！

前言

用 js 实现一个年份轮换选择效果。废话不多说，看图：

JavaScript如何实现年份轮播选择效果

一、思路是什么？

  • 布局： 左右箭头使用实体字符 < 和 > 年份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" 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()"  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()"  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) {

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


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

感谢各位的阅读，以上就是“JavaScript如何实现年份轮播选择效果”的内容了，经过本文的学习后，相信大家对JavaScript如何实现年份轮播选择效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: JavaScript如何实现年份轮播选择效果

本文链接: https://lsjlt.com/news/309467.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript如何实现年份轮播选择效果
    这篇文章主要讲解了“JavaScript如何实现年份轮播选择效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现年份轮播选择效果”吧！前言用 js 实现一个年份轮换...
    99+
    2023-06-27
  • 用JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下 实现代码： <!DOCTYPE html> <html lang=...
    99+
    2024-04-02
  • javascript实现花样轮播效果
    本文实例为大家分享了javascript实现花样轮播效果的两种实现方法，供大家参考，具体内容如下 第一种：简单的带按钮的轮播 介绍：左右按钮控制轮播，点击左按钮切换上一张图片，点击右...
    99+
    2024-04-02
  • jquery如何实现轮播效果
    这篇文章主要为大家展示了“jquery如何实现轮播效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何实现轮播效果”这篇文章吧。 ...
    99+
    2024-04-02
  • 原生JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下 一、功能： 1、每隔2.5s自动切换下一张轮播图； 2、底部按钮切换对应轮播图； 3、鼠标...
    99+
    2024-04-02
  • 使用JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下 纯js，不使用轮播图控件怎么做轮播图呢，往下看吧 效果图： 1.可点击小圆点切换图片 2...
    99+
    2024-04-02
  • android如何实现banner轮播图无限轮播效果
    小编给大家分享一下android如何实现banner轮播图无限轮播效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体内容如下效果展示第一步（权限配置）<uses-permission android:n...
    99+
    2023-05-30
    android banner
  • JavaScript如何实现带缩略图的轮播效果
    这篇文章给大家分享的是有关JavaScript如何实现带缩略图的轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。代码：<html><head><...
    99+
    2024-04-02
  • JavaScript如何实现首页图片轮播图效果
    这篇文章主要介绍“JavaScript如何实现首页图片轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现首页图片轮播图效果”文章能帮助大家解决问题。一、轮番图效果展...
    99+
    2023-07-02
  • Swiper如何实现轮播图效果
    小编给大家分享一下Swiper如何实现轮播图效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下<!DOCTYP...
    99+
    2024-04-02
  • React如何实现轮播图效果
    这篇文章主要介绍“React如何实现轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React如何实现轮播图效果”文章能帮助大家解决问题。效果：轮播功能用到了react-slick组件，安装...
    99+
    2023-07-02
  • css如何实现轮播图效果
    本文小编为大家详细介绍“css如何实现轮播图效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“css如何实现轮播图效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。准备了3张大小相同的图片，将图片的文件名命名为...
    99+
    2023-07-04
  • JavaScript实现简单的轮播图效果
    轮播图是什么？ 轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里...
    99+
    2024-04-02
  • 原生javascript+CSS实现轮播图效果
    本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码，供大家参考，具体内容如下 1.html <ul id="banner" ></ul&g...
    99+
    2024-04-02
  • javascript实现图片轮播简单效果
    本文实例为大家分享了javascript实现图片轮播简单效果的具体代码，供大家参考，具体内容如下 这里是css样式  * {      margin: 0;  padding...
    99+
    2024-04-02
  • jquery如何实现焦点轮播效果
    这篇文章给大家分享的是有关jquery如何实现焦点轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。HTML代码<!DOCTYPE html> <...
    99+
    2024-04-02
  • jQuery如何实现无缝轮播效果
    这篇文章将为大家详细讲解有关jQuery如何实现无缝轮播效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。这个无缝轮播和那个图片平滑滚动的原理差不多。原理：ul向左滚动，...
    99+
    2024-04-02
  • Vue中如何实现轮播图效果
    这篇文章将为大家详细讲解有关Vue中如何实现轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue 过渡Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除...
    99+
    2024-04-02
  • Vue如何实现无缝轮播效果
    这篇文章主要介绍Vue如何实现无缝轮播效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下代码1.子组件代码代码如下（示例）：<template>  <div>&...
    99+
    2023-06-14
  • 纯js如何实现轮播图效果
    这篇文章主要介绍纯js如何实现轮播图效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图代码 css * {    margin: 0;&nb...
    99+
    2023-06-25
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作