js+css实现全屏幻灯片轮换切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现全屏幻灯片轮换切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; background-position: center center; background-size: cover; transition: 0.4s ease; } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: -1; } .slider-container { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); height: 70vh; width: 70vw; position: relative; overflow: hidden; } .slide { opacity: 0; height: 100vh; width: 100vw; background-position: center center; background-size: cover; position: absolute; top: -15vh; left: -15vw; transition: 0.4s ease; z-index: 1; } .slide.active { opacity: 1; } .arrow { position: fixed; background-color: transparent; padding: 20px; font-size: 30px; color: #fff; border: 2px solid orange; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow:focus { outline: 0; } .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } </style> </head> <body> <!-- partial:index.partial.html --> <div class="slider-container"> <div class="slide active" style=" background-image: url('//repo.bfw.wiki/random/800x600/景色'); " ></div> <div class="slide" style=" ba.........完整代码请登录后点击上方下载按钮下载查看
网友评论0