js实现全屏键盘操作滚轮文字幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js实现全屏键盘操作滚轮文字幻灯片切换效果代码,按键盘左右方向键上下轮换。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** TODO in 2025: Cleanup this file **/ @import url("https://fonts.googleapis.com/css2?family=Radio+Canada&display=swap"); html, body { height: 100%; width: 100%; align-items: center; font-family: "Radio Canada", sans-serif; } body { background: black; color: white; overflow: hidden; transition: color, background, 0.66s; } #app { display: flex; height: 100%; width: 100%; } #mainContent { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; flex-flow: column nowrap; } #content { display: block; width: 66%; text-align: left; } #main { font-size: 6vh; } #sub { font-size: 3vh; font-style: italic; } #controls { bottom: 0; position: fixed; display: flex; width: 66%; justify-content: center; } .arrow { font-size: 5vw; transform: translateY(66%); margin: 12px; } .arrow:hover { cursor: pointer; } #menuContainer { height: 50vh; width: 50vh; background-color: #F9D923; border-radius: 50%; text-align: center; transform: translateY(66%); } #textContainer { height: inherit; width: inherit; display: flex; justify-content: center; align-items: center; border-radius: 50%; transition: all 0.66s, color 0s; } .item { position: absolute; font-size: 4.1666666667vh; } #itemOne { transform: translateY(-30vh); } #itemTwo { transform: translateX(-30vh) rotate(270deg); } #itemThree { transform: translateY(30vh) rotate(180deg); } #itemFour { transform: translateX(30vh) rotate(90deg); } </style> </head> <body> <div id="app"> <div id="mainContent"> <div id="content"> <h1 id="main"> </h1> <p id="sub"></p> </div> <div id="controls"> <div class="arrow" id="left">←</div> <div id="menuContainer"> <div id="textContainer"> <div class="item" id="itemOne">One</div> <div class="item" id="itemTwo">Two</div> <div class="item" id="itemThree">Three</div> <div class="item" id="itemFour">Four</div> </div> </div> <div class="arrow" id="right">→</div> </div> </div> </div> <script > const mainText = document.querySelector("#main"); const subText = document.querySelector("#sub"); const theBod = document.querySelector("body"); const menuContainer = document.querySelector("#textContainer"); const leftArrow = document.querySelector("#left"); const rightArrow = document.querySelector("#right"); const pageText = [ { main: "Arrow keys work on this", sub: "Most of the i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0