react+gsap实现上下滚动的图片幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:react+gsap实现上下滚动的图片幻灯片效果代码,实用react手写的幻灯片效果代码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } #root { display: flex; justify-content: center; align-items: center; height: 100vh; } .carousel { overflow: hidden; position: relative; z-index: 1; width: 70%; aspect-ratio: 16/9; border-radius: 20px; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3); } .item { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } .item img { object-fit: cover; width: 100%; height: 100%; } </style> </head> <body> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script> <script type="text/babel"> const { useEffect, useRef, useState,useCallback} = window.React; const { render } = window.ReactDOM; const Carousel = ({ images, timer = 2000 }) => { const [active, setActive] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const $root = useRef() const nextItem = useCallback(() => { const ctx = gsap.context(() => { const items = gsap.utils.toArray('.item') const activeItem = items[active] const nextItem = items[act.........完整代码请登录后点击上方下载按钮下载查看
网友评论0