radio+js实现文字横向幻灯片切换效果代码
代码语言:html
所属分类:其他
代码描述:radio+js实现文字横向幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { --dark-blue-text: #003781; --dark-blue-bg: #122b54; --light-blue: #f0f7fc; --white: #fff; } .sr-only { border: 0; clip-path: inset(50%); clip: rect(0, 0, 0, 0); height: 1px; margin: 0; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; height: 100%; } body { -webkit-font-smoothing: antialiased; align-items: center; background-color: var(--white); color: var(--dark-blue-text); display: flex; display: flex; flex-direction: column; font-family: "Livvic", sans-serif; font-size: 1.6rem; height: 100%; justify-content: flex-start; margin: 0; overflow-x: hidden; padding: 0; line-height: 1.4; } .wrapper { display: flex; flex-direction: column; gap: 1rem; margin: 0 1.6rem; max-width: 144rem; width: 100%; } .my-section { background-color: var(--light-blue); padding: 2rem 0; } .my-section:has(.carousel-item:nth-of-type(1) input[type="radio"]:checked) .top-link--mobile:nth-child(1), .my-section:has(.carousel-item:nth-of-type(2) input[type="radio"]:checked) .top-link--mobile:nth-child(2), .my-section:has(.carousel-item:nth-of-type(3) input[type="radio"]:checked) .top-link--mobile:nth-child(3), .my-section:has(.carousel-item:nth-of-type(4) input[type="radio"]:checked) .top-link--mobile:nth-child(4), .my-section:has(.carousel-item:nth-of-type(5) input[type="radio"]:checked) .top-link--mobile:nth-child(5) { font-weight: bold; } .my-section:has(.carousel-item:nth-of-type(1) input[type="radio"]:checked) .carousel-item:nth-of-type(1) .top-link--desktop::after, .my-section:has(.carousel-item:nth-of-type(2) input[type="radio"]:checked) .carousel-item:nth-of-type(2) .top-link--desktop::after, .my-section:has(.carousel-item:nth-of-type(3) input[type="radio"]:checked) .carousel-item:nth-of-type(3) .top-link--desktop::after, .my-section:has(.carousel-item:nth-of-type(4) input[type="radio"]:checked) .carousel-item:nth-of-type(4) .top-link--desktop::after, .my-section:has(.carousel-item:nth-of-type(5) input[type="radio"]:checked) .carousel-item:nth-of-type(5) .top-link--desktop::after { background-color: var(--dark-blue-text); bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; right: 0; width: 100%; } .top-link { border-bottom: 1px solid var(--dark-blue-text); color: var(--dark-blue-text); cursor: pointer; font-size: 1.4rem; font-weight: bold; margin: 0 0 1.6rem 0; padding: 1rem; text-align: center; text-decoration: none; position: relative; } .top-link--desktop { display: none; width: 100%; } .top-link-wrapper--mobile { -ms-overflow-style: none; display: flex; overflow-x: scroll; padding: 0; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; scroll-behavior: smooth; } .top-link-wrapper--mobile::-webkit-scrollbar { display: none; } .top-link.top-link--mobile { flex-shrink: 0; font-size: 1.2rem; font-weight: normal; margin: 0; padding: 1rem 2rem; } .top-link--desktop { display: none; } .carousel-fieldset { border: none; margin: 0; max-width: 100%; min-width: 0; padding: 0; position: relative; width: 100%; } .carousel-wrapper { -ms-overflow-style: none; display: flex; margin: 0; max-width: 100%; min-width: 0; overflow-x: scroll; padding: 1.6rem 1.6rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%; } .carousel-wrapper::-webkit-scrollbar { display: none; } .carousel-spacer { background-color: transparent; width: 60rem; flex-shrink: 0; display: none; } .carousel-item { align-items: center; display: flex; flex-direction: column; flex-shrink: 0; justify-content: flex-start; max-width: 36.4rem; min-width: calc(320px - 10rem); scroll-snap-align: center; width: calc(100vw - 6rem); } .carousel-item:has(input[type="radio"]:checked) .carousel-panel { background-color: var(--dark-blue-bg); color: var(--white); } .carousel-panel { align-items: flex-start; background-color: var(--white); border-radius: 1.2rem; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; flex-grow: 1; font-family: sans-serif; margin: 0 0.8rem 0 0.8rem; padding: 1.6rem; position: relative; } .carousel-panel .accessible-label { background-color: transparent; bottom: 0; cursor: pointer; display: block; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; width: 100%; } .carousel-panel__heading { padding: 0; margin: 0 0 1.6rem 0; } .carousel-panel__body > * { margin: 0 0 1.6rem 0; } .carousel-panel__body > *:last-child { margin: 0; } .scroll-button-wrapper { align-items: center; background-color: var(--light-blue); bottom: 0; display: none; justify-content: center; position: absolute; top: 0; width: 5rem; margin: 7.2rem 0 1.6rem 0; } .scroll-button-wrapper--previous { left: 0; } .scroll-button-wrapper--next { right: 0; } .scroll-button { align-items: center; align-items: center; background-color: var(--dark-blue-text); border-radius: 0.5rem; border: 0; color: var(--white); cursor: pointer; display: flex; font-weight: bold; height: 3rem; justify-content: center; justify-content: center; line-height: 1; opacity: 1; position: relative; transition: opacity 0.5s; width: 3rem; } .scroll-button[disabled] { cursor: default; opacity: 0.2; } .scroll-button::after { border-top: 1.5px solid var(--white); content: ""; display: block; height: 0.8rem; width: 0.8rem; } .scroll-button.scroll-button--previous::after { border-left: 1.5px solid var(--white); transform: translate(2px) rotate(-45deg); } .scroll-button.scroll-button--next::after { border-right: 1.5px solid var(--white); transform: translate(-2px) rotate(45deg); } .dots-wrapper { display: flex; flex-direction: row; justify-content: center; gap: 0; } .dots-wrapper .dot { align-items: center; cursor: pointer; display: flex; height: 3.2rem; justify-content: center; width: 3.2rem; } .dots-wrapper .dot::before { background-color: var(--dark-blue-text); border-radius: 50%; content: ""; display: block; height: 0.8rem; opacity: 0.3; width: 0.8rem; } .dots-wrapper .dot:hover::before { opacity: 0.7; } .my-section:has(.carousel-item:nth-of-type(1) input[type="radio"]:checked) .dot:nth-child(1)::before, .my-section:has(.carousel-item:nth-of-type(2) input[type="radio"]:checked) .dot:nth-child(2)::before, .my-section:has(.carousel-item:nth-of-type(3) input[type="radio"]:checked) .dot:nth-child(3)::before, .my-section:has(.carousel-item:nth-of-type(4) input[type="radio"]:checked) .dot:nth-child(4)::before, .my-section:has(.carousel-item:nth-of-type(5) input[type="radio"]:checked) .dot:nth-child(5)::before { opacity: 1; } .section-text { font-size: 1.4rem; margin: 1.6rem auto; max-width: 72ch; padding: 0 1.6rem; text-align: center; } /* Mobile first - Adjust for tablet and desktop */ @media (min-width: 600px) { .top-link-wrapper--mobile { display: none; } .scroll-button-wrapper { display: flex; } .carousel-wrapper { padding: 1.6rem 5rem; } .carousel-spacer { display: block; } .top-link--desktop { display: block; } .dots-wrapper { display: none; } .section-text { font-size: 1.6rem; } } </style> </head> <body translate="no"> <div class="wrapper"> <button type="button">Tab button 1</button> <section class="my-section"> <div class="top-link-wrapper top-link-wrapper--mobile" aria-hidden="true"> <label class="top-link top-link--mobile" for="local-recovery">Local Recovery</label> <label class="top-link top-link--mobile" for="local-recovery-home-start">Local Recovery & Home Start</label> <label class="top-link top-link--mobile" for="nationwide-recovery">Nationwide Recovery</label> <label class="top-link top-link--mobile" for="nationwide-recovery-home-start">Nationwide Recovery & Home Start</label> <label class="top-link top-link--mobile" for="slide-5">Slide 5</label> </div> <fieldset id="recovery-type-fieldset" class="carousel-fieldset"> <legend class="sr-only">Select a recovery type:</legend> <div class="carousel-wrapper"> <span class="carousel-spacer carousel-spacer--left-side"></span> <!-- Carousel item 1 --> <div id="recovery-type-local-recovery" class="carousel-item"> <label class="top-link top-link--desktop" for="local-recovery" aria-hidden="true">Local Recovery</label> <div class="carousel-panel"> <label class="accessible-label" for="local-recovery"><span class="sr-only">Local Recovery</span></label> <input type="radio" id="local-recovery" class="sr-only" name="recovery-type" value="Local Recovery" aria-describedby="recovery-type-local-recovery-details" /> <h3 class="carousel-panel__heading" aria-hidden="true">Local Recovery</h3> <div id="recovery-type-local-recovery-details" class="carousel-panel__body"> <p>Details 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nemo aliquid atque temporibus deserunt, eveniet ut quisquam ducimus eaque, iste, sit suscipit nam quos dolore voluptates adipisci numquam blanditiis sunt?</p> </div> </div> </div> <!-- Carousel item 2 --> <div id="recovery-type-local-recovery-home-start" class="carousel-item"> <label class="top-link top-link--desktop" for="local-recovery-home-start" aria-hidden="true">Local Recovery & Home Start</label> <div class="carousel-panel"> <label class="accessible-label" for="local-recovery-home-start"><span class="sr-only">Local Recovery & Home Start</span></label> <input type="radio" id="local-recovery-home-start" class="sr-only" name="recovery-type" value="Local Recovery & Home Start" aria-describedby="recovery-type-local-recovery-home-start-details" /> <h3 class="carousel-panel__heading" aria-hidden="true">Local Recovery & Home Start</h3> <div id="recovery-type-local-recovery-home-start-details" class="carousel-panel__body"> <p>Details 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nemo aliquid atque temporibus deserunt, evenie.</p> </div> </div> </div> <!-- Carousel item 3 --> <div id="recovery-type-nationwide-recovery" class="carousel-item"> <label class="top-link top-link--desktop" for="nationwide-recovery" aria-hidden="true">Nationwide Recovery</label> <div class="carousel-panel"> <label class="accessible-label" for="nationwide-recovery"><span class="sr-only">Nationwide Recovery</span></label> <input type="radio" id="nationwide-recovery" class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0