react函数组件实现四栏轮播图切换

本文介绍如何在React中使用函数组件创建一个独特的四栏轮播图。通过将图片分四部分并设置延迟切换时间,实现平滑的切换效果。在组件中管理当前页、上一页状态,并确保切换时不会超出数据范围。利用useState更新数据,配合CSS实现层次变换。
摘要由CSDN通过智能技术生成

实现的功能为一个轮播图,分为纵向四栏,切换的时候四部分延迟切换。
在这里插入图片描述
主题思想:将底部整体的div分为四部分,纵向四等分,每部分都是当前要展示的图片,通过定位拼接到一起,看起来跟原版的图片一样,给四部分css设置时间,从左往右依次递增,这样切换的时候就会依次出现了。css部分不细讲,这里主要讲一下函数组件怎么写

import React, {
    useState, useEffect } from "react";
import "./index.css";

export default function Staring() {
   
  const [activeSlide, setactiveSlide] = useState(-1);
  const [prevSlide, setprevSlide] = useState(-1);
  const [sliderReady, setsliderReady] = useState(false);
  let IMAGE_PARTS = 4;

  useEffect(() => {
   
    setTimeout(() => {
   
      setactiveSlide(0);
      setsliderReady(true);
    }, 0);
  }, []);

  function changeSlides(change) {
   
    const {
    length } = slides;
    const prevSlide1 = activeSlide;
    let activeSlide1 = prevSlide1 + change;
    if (activeSlide1 < 0) activeSlide1 = length - 1;
    if (activeSlide1 >= length) activeSlide1 = 0;
    setactiveSlide(activeSlide1);
    setprevSlide(prevSlide1);
  }

  const slides = [
    {
   
      name: "杨扬",
      message:
        "杨扬在2002年盐湖城冬奥会上,为中国获得了第一枚冬奥会金牌。2006年都灵冬奥会结束后,杨扬宣布退出国家队。2010年2月,她以退役运动员身份当选国际奥委会委员。",
      img: "img/stars/yangyang600.jpg",
    },
    {
   
      name: "张虹",
      message:
        "张虹在2014年索契冬奥会速度滑冰女子1000米决赛中,滑出了1分14秒02的成绩,力压其他选手夺冠,这是中国冬奥会历史上的第一枚速度滑冰金牌。",
      img: "img/stars/zhanghong600.jpg",
    },
    {
   
      name: "李坚柔",
      message:
        "李坚柔在索契冬奥会短道速滑女子500米决赛中获得冠军,为中国代表团夺得索契冬奥会首枚金牌。",
      img: "img/stars/lijianrou600.jpg",
    },
    {
   
      name: "王濛",
      message:
        "王濛在2006年都灵冬奥会获得短道速滑女子500米冠军,4年后又在温哥华冬奥会上夺得短道速滑女子500米、1000米以及3000米接力的金牌。",
      img: "img/stars/wangmeng600.jpg",
    },
    {
   
      name: "申雪/赵宏博",
      message:
        "申雪、赵宏博在2010年温哥华冬奥会上力压庞清、佟健及德国组合夺冠,完成花样滑冰双人滑项目的大满贯。2012年2月,两人退役。",
      img: "img/stars/shenxuezhaohongbo190.jpg",
    },

    {
   
      name: "韩晓鹏",
      message:
        "韩晓鹏在2006年都灵冬奥会上一鸣惊人,在决赛中以250.77分力挫群雄,以完美的两个动作获得了都灵冬奥会自由式滑雪男子空中技巧金牌,也是中国第一枚自由式滑雪项目的金牌 。",
      img: "img/stars/hanxiaopeng600.jpg",
    },
    {
   
      name: "金妍儿",
      message:
        "1990年9月出生,韩国著名女单花样滑冰运动员,出生于韩国京畿道富川市。7岁开始学习花样滑冰。2009年洛杉矶世锦赛上,金妍儿以创造女子短节目和总成绩两项记录的成绩获得冠军。",
      img: "img/stars/jinyaner_big.jpg",
    },
    {
   
      name: "浅田真央",
      message:
        "日本著名花样滑冰选手,出生于爱知县名古屋市,她是亚洲第一位三次夺得世界花样滑冰锦标赛金牌并赢得三次“世界冠军”头衔的女子单人滑选手。",
      img: "img/stars/qiantianzhenyang_big.jpg",
    },
    {
   
      name: "普鲁申科",
      message:
        "1982年11月出生,俄罗斯花样滑冰男子单人滑选手。国际滑冰联盟花样滑冰大奖赛分站冠军、世界花样滑冰青年锦标赛冠军、欧洲青年奥运会冠军、友好运动会冠军。",
      img: "img/stars/pulushenke_big.jpg",
    },
    {
   
      name: "安贤洙",
      message:
        "1985年出生,俄罗斯籍韩国裔男子短道速滑运动员。加入俄罗斯籍并出战2014年索契冬奥会,并获得男子个人1000米冠军,以及1500米季军,500米冠军和5000米接力金牌",
      img: "img/stars/name_ann.png",
    },
    {
   
      name: "奥拉·比约达伦",
      message:
        "挪威滑雪运动员,绰号“国王”,曾在2002年冬奥会冬季两项项目一人独得男子10公里、15公里和12.5公里追逐赛三枚金牌,被誉为“冬季两项之王”。",
      img: "img/stars/biyuedalun_big.jpg",
    },
    {
   
      name: "劳琳-威廉姆斯",
      message:
        "1983年出生,美国运动员,世界上跑的最快的女飞人之一,在2005年的赫尔辛基世界田径锦标赛上,威廉姆斯以10秒93获得了女子100米比赛金牌",
      img: "img/stars/weilianmusi.jpg",
    },
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值