js+css实现图片图文排列左右轮播切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现图片图文排列左右轮播切换效果代码
代码标签: js css 图片 图文 排列 左右 轮播 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lexend:wght@400;500&display=swap'> <style> @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap"); :root { --canvas: 220; --bg: hsl(var(--canvas), 15%, 22%); --fg: hsl(var(--canvas), 39%, 95%); --link: hsl(var(--canvas), 90%, 80%); --linkh: hsl(150, 95%, 70%); --wgt: 200; } body, html { font-family: heebo, sans-serif; color: var(--fg); background: var(--bg); font-weight: var(--wgt); padding: 0; display: grid; place-items: center; height: 100%; } a { color: var(--link); text-decoration: none; font-weight: 450; transition: all 0.3s ease; } a:hover, a:focus, a:active { color: var(--linkh); } button { background: hsl(var(--canvas), 10%, 10%); color: inherit; border: none; border-radius: 0.5em; padding: 0.25em 0.5em; font-family: inherit; font-size: inherit; } .social-icon { stroke-width: 1.25; stroke: currentColor; fill: transparent; background: transparent; stroke-linecap: round; stroke-linejoin: round; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; z-index: 10; animation: iconsLoad 10s ease both 5s; } .social-icon path { fill: none; } .social-icon.twitter { right: 40px; animation-delay: 4s; } .social-icon.codepen { position: absolute; bottom: 10px; right: 80px; width: max-content; animation-delay: 3s; } @keyframes iconsLoad { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0px); } } :root { --height: calc( 80vh - 50px ); --width: 450px; } .carousel { display: grid; transform: translate3d(0,0,0.1px); } .carousel__list { display: flex; overflow: hidden; list-style: none; padding: 2em 0 3em; margin: -2em 0 -3em; } .carousel__item { display: grid; position: relative; align-content: start; margin: 0 10px; padding: 0; flex: 1 1 10%; height: var(--height); overflow: hidden; background: rgba(255,255,255,0.2); border-radius: 16px; transform: translate3d(0,0,0.1px); box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 15px 2px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; } .carousel__item::before { content: ""; position: absolute; inset: -20px; z-index: 2; } .carousel__item, .carousel__item * { transition: all .6s cubic-bezier(.55,.24,.18,1); user-select: none; } .carousel__image, .carousel__contents { width: var(--width); height: auto; } .carousel__item:hover { flex-basis: calc( var(--width) / 2 ); transition: all 0.3s ease; } .carousel__item[data-active] { flex-basis: var(--width); flex-grow: 0; } @media screen and (max-width: 800px) { .carousel__item { flex-basis: 15%; } } @media screen and (max-width: 600px) { .carousel__item { flex-basis: 10%; margin: 0 5px; border-radius: 8px; font-size: 3vw; } .carousel__item[data-active] { flex-basis: 45%; flex-grow: 0; } .carousel__item:nth-child(3), .carousel__item:nth-child(7) { flex: 0 0 10px; } .carousel__item:nth-child(2), .carousel__item:nth-child(8) { flex: 0 0 5px; transform: translateX(-50px); } .carousel__item:nth-child(8) { transform: translateX(50px); } .carousel__item:nth-child( 1 ), .carousel__item:nth-child( n + 9 ) { flex: 0 0 0px; margin: 0; box-shadow: none; opacity: 0!important; } .carousel__item:not(:nth-child( n + 5 )) img, .carousel__item:nth-child( n + 7 ) img { opacity: 0.8; } .carousel__item:not(:nth-child( n + 4 )) *, .carousel__item:nth-child( n + 7 ) * { opacity: 0!important; } } @media screen and (min-width: 600px) { .carousel__item:nth-child(3), .carousel__item:nth-child(10) { flex: 0 0 10px; } .carousel__item:nth-child(2), .carousel__item:nth-child(11) { flex: 0 0 5px; transform: translateX(-50px); } .carousel__item:nth-child(11) { transform: translateX(50px); } .carousel__item:nth-child( 1 ), .carousel__item:nth-child( n + 12 ) { flex: 0 0 0px; margin: 0; box-shadow: none; opacity: 0!important; } .carousel__item:not(:nth-child( n + 5 )) img, .carousel__item:nth-child( n + 9 ) img { opacity: 0.8; } .carousel__item:not(:nth-child( n + 4 )) *, .carousel__item:nth-child( n + 10 ) * { opacity: 0!important; } } [data-active], [data-active] * { opacity: 1!important; filter: none!important; } .carousel__item img { display: block; position: absolute; width: var(--width); height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; aspect-ratio: 2/3; object-fit: cover; filter: saturate(0.2) contrast(0.75) brightness(1.1); } .carousel__item::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(180deg, rgba(2,0,36,0) 30%, rgba(118,221,136,.5) 60%, rgba(0,255,246,.6) 100%); opacity: 0.5; transition: all .6s cubic-bezier(.55,.24,.18,1); } [data-active].carousel__item::after { transform: translateY(100%); } .carousel__contents { display: flex; flex-direction: column-reverse; justify-content: start; max-width: 18em; min-height: 200px; padding: 1em; background-image: radial-gradient( ellipse at 0px 0px, rgba(0,0,0,0.4) 20%, transparent 50% ); background-size: 170% 200px; background-repeat: no-repeat; transform: translateX(-50%); z-index: 1; transition-duration: 1s; opacity: 0; } @media screen and (max-width: 800px) { .carousel__contents { max-width: 13em; } } @media screen and (max-width: 600px) { .carousel__contents { max-width: 11em; } } [data-active] .carousel__contents { transform: translateX(0px); transition-duration: 0.66s; opacity: 1; } .carousel__contents * { margin: 0; line-height: 1.1; } .carousel__contents .user__name { color: #e8eff4; font-size: 1.75em; font-weight: 600; letter-spacing: .8px; text-shadow: 0 1px 0 rgba(0,0,0,0.3); } .carousel__contents .user__title { font-family: lexend; font-size: .875em; letter-spacing: 1.25px; font-weight: 500; text-transform: uppercase; color: transparent; background: linear-gradient( 270deg, rgb(67, 255, 0), rgb(0, 255, 247) ); background-clip: text; -webkit-background-clip: text; opacity: 0.85!important; text-wrap: balance; margin-bottom: 0.5em; } .carousel__nav { padding: 1em; justify-self: end; grid-row: 1; display: flex; justify-content: space-between; gap: 1em; } button { display: flex; gap: .5em; padding: 0.5em 1.5em; } button span, button svg { margin: 0; padding: 0; fill: none; } button path { fill: currentColor; } body, html { padding: 0; align-items: start; } </style> </head> <body> <main id="app"> <section class="carousel"> <ul class="carousel__list"> <li class="carousel__item"> <div class="carousel__box"> <div class="carousel__image"><img src="//repo.bfw.wiki/bfwrepo/image/62ff45c2ce421.png" width="480" height="720"/></div> <div class="carousel__contents"> <h2 class="user__name">Anthony Lee</h2> <h3 class="user__title">Archetypal Professor of Recognition</h3> </div> </div> </li> <li class="carousel__item"> <div class="carousel__box"> <div class="carousel__image"><img src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png" width="480" height="720"/></div> <div class="carousel__contents"> <h2 class="user__name">Alicia Chevalier</h2> <h3 class="user__title">Corporate Usability Analyst</h3> </div> </div> </li> <li class="carousel__item"> <div class="carousel__box"> <div class="carousel__image"><img src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png" width="480" height="720"/></div> <div class="carousel__contents"> <h2 class="user__name">Nate Boucher</h2> <h3 class="user__title">Customer Impact Officer</h3> </div> </div> </li> <li class="carousel__item"> <div class="carousel__box"> <div class="carousel__image"><img src="//repo.bfw.wiki/bfwrepo/image/629fea5a8b628.png" width="480" height=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0