Html5实现官网Banner视频、图片轮播

轮播banner使用的动画库：Ant-Motion

官方给了很多小demo，可以随意捣鼓实现后的效果如下图（gif导出比较大，所以看上去卡卡的，实际很流畅）

播放视频采用的是Html5中的video 复制代码autoplay 如果出现该属性，则视频在就绪后马上播放。controls如果出现该属性，则向用户显示控件，比如播放按钮。height设置视频播放器的高度。loop如果出现该属性，则当媒介文件完成播放后再次开始播放。muted规定视频的音频输出应该被静音。poster规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。src要播放的视频的 URL。width设置视频播放器的宽度。Banner轮播

1、封装banner组件

import React from "react";import { useRoute } from "@/hooks";import { Button } from "antd";import { RightOutlined } from "@ant-design/icons";import BannerAnim, { Element } from "rc-banner-anim";import TweenOne from "rc-tween-one";import FontText from "../html/FontText";import "./index.less";const BgElement = Element.BgElement;export default function ({ bannerList }) { const [_, setRoute] = useRoute(); return ( {bannerList.map((item, index) => ( {item.video ? ( ) : ( )} {item.title} {!item.btn && ( )} {item.btn && ( setRoute(item.url)} style={{ minWidth: 180, height: 54, background: "#4E80F8" }} > {item.btn} )} ))} );}复制代码

2、设计需要map操作的数据结构

export const bannerList = [ { id: "1", btn: "", title: "我是banner1，是视频", subTitle: "banner下面的一小行简介", video: require("@/assets/images/home/banner_video.mp4"), }, { id: "3", btn: "banner2有按钮", title: "我是banner2，是图片", subTitle: "banner下面的一小行简介", image: require("@/assets/images/home/banner2.jpg"), }, { id: "2", btn: "banner3有按钮", title: "我是banner3，是图片", subTitle: "banner下面的一小行简介", image: require("@/assets/images/home/banner3.jpeg"), },];复制代码