React实现一个简易版Swiper( 二 ) _生活百科

在这里，我们给了他默认的宽度为auto，来实现整体宽度自适应。而使用transition让后续的图片轮换可以有动画效果。
最后，我们只需要将图片循环渲染在列表中即可。
import styled from "styled-components";import React, { FC } from "react";const Swiper = styled.div`  overflow: hidden;  position: relative;`;const SwiperContainer = styled.div`  position: relative;  width: auto;  display: flex;  align-item: center;  justify-content: flex-start;  transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;`;const SwiperSlide = styled.div`  display: flex;  align-item: center;  justify-content: center;  flex-shrink: 0;`;const Swiper: FC<  {    direction?: 'horizontal' | 'vertical';    speed?: number;    width: string;    height: string;    urls: string[];  }> = ({  direction = "horizontal",  speed = 3,  width = "",  height = "",  urls = []}) => {  return (<Swiper style={{ width, height }}>    <SwiperContainer      id="swiper-container"      style={{        height,        // 根据轮播方向参数，调整flex布局方向        flexDirection: direction === "horizontal" ? "row" : "column",      }}    >     {urls.map((f: string, index: number) => (        <SwiperSlide style={{ ...styles }}>          <img src=https://www.huyubaike.com/biancheng/{f} style={{ ...styles }} /> ))} );}export default Swiper;至此为止，我们整体的dom结构与样式就编写完成了，后面要做的就是如何让他们按照我们想要的那样，动起来。
4、动画实现既然说到了轮播动画的实现，那么我们最先想到的也是最方便的方式，肯定是我们最熟悉的setInterval，那么整体的实现思路是什么样的呢？
先思考一下我们想要实现的功能：1、按照预设的参数实现定时的图片切换功能；2、如果没有预设delay的话，则不自动轮播；3、每次轮播的距离，是由用户配置的图片宽高决定；4、轮播至最后一张后，停止轮播。
首先，为了保证元素可以正常的移动，我们在元素身上添加ref和id便于获取正确的dom元素。
import React, { FC, useRef } from "react";const swiperContainerRef = useRef<HTMLDivElement>(null);...<SwiperContainer  id="swiper-container"  ref={swiperContainerRef}  style={{    height,    // 根据轮播方向参数，调整flex布局方向    flexDirection: direction === "horizontal" ? "row" : "column",  }}>...</SwiperContainer>...其次，我们需要定义activeIndex这个state，用来标记当前展示的节点；以及用isDone标记是否所有图片都已轮播完成(所以反馈参数) 。
import React, { FC, useState } from "react";const [activeIndex, setActiveIndex] = useState<number>(0);const [isDone, setDone] = useState<boolean>(false);然后，我们还需要进行timer接收参数的定义，这里我们可以选择使用useRef来进行定义。
import React, { FC, useRef } from "react";const timer = useRef<any>(null);在上面的一切都准备就绪后，我们可以进行封装启动方法的封装
  // 使用定时器，定时进行activeIndex的替换  const startPlaySwiper = () => {    if (speed <= 0) return;    timer.current = setInterval(() => {      setActiveIndex((preValue) => preValue + 1);    }, speed * 1000);  };

React实现一个简易版Swiper( 二 )

推荐阅读

紫色配什么颜色好看,紫色衣服和什么颜色搭配

上初中要军训吗上初中要军训吗？

入门朝东还是朝西好入门朝东还是朝西好一点呢

有强迫症桌面一定要很干净整洁的星座

王者荣耀秋分时节活动攻略-秋分时节时间与奖励一览推荐阅读

新课程的三维目标是什么

税控盘减免后的增值税怎么计提税控盘减免的增值税怎么做账

洛克王国宠物练级攻略洛克王国雪精灵练级攻略

当下的语文教材，叫好者有之，质疑者同样有之。你怎么看呢？

关于鮠科简述鮠科

想离婚财产怎么分

2022年8月9日宝宝出生的五行缺什么沙石金开执位属五行

属鸡人双鱼座女生性格

台式烤肠用烤箱烤多长时间烤肠用烤箱烤多长时间

关于替嫁后我被病娇总裁宠上了简述替嫁后我被病娇总裁宠上了

健身喝蛋白粉的副作用影响肾脏功能

关于曹正海简述曹正海

汽车香水危害与好处车用香水有哪些危害

大头菜炒柿子做法大头菜炒柿子

灌篮高手手游为什么感觉大家都喜欢海边球场？