全屏点击轮播
1. html 结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fullscreen Slider</title> <link rel="stylesheet" href="style.css"> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> </head> <body> <div class="slider"> <div class="slide current"> <div class="content"> <h1>第一页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> <div class="slide"> <div class="content"> <h1>第二页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> <div class="slide"> <div class="content"> <h1>第三页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> <div class="slide"> <div class="content"> <h1>第四页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> <div class="slide"> <div class="content"> <h1>第五页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> <div class="slide"> <div class="content"> <h1>第六页</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit odit nesciunt nulla molestias eveniet cupiditate harum placeat ducimus ratione neque nobis odio vel et, quaerat ex nihil libero laudantium quidem.</p> </div> </div> </div> <div class="buttons"> <button id="prev"><i class="fas fa-arrow-left"></i></button> <button id="next"><i class="fas fa-arrow-right"></i></button> </div> <script src="main.js"></script> </body> </html>
2. css 样式
/* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #333; color: #fff; line-height: 1.6; } .slider { position: relative; overflow: hidden; height: 100vh; width: 100vw; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease-in-out; } .slide.current { opacity: 1; } /* background images */ .slider > .slide:nth-of-type(1) { background: url('./img/1.jpg') no-repeat center center/cover; } .slider > .slide:nth-of-type(2) { background: url('./img/9.jpg') no-repeat center center/cover; } .slider > .slide:nth-of-type(3) { background: url('./img/11.jpeg') no-repeat center center/cover; } .slider > .slide:nth-of-type(4) { background: url('./img/10.jpeg') no-repeat center center/cover; } .slider > .slide:nth-of-type(5) { background: url('./img/5.jpeg') no-repeat center center/cover; } .slider > .slide:nth-of-type(6) { background: url('img/7.jpeg') no-repeat center center/cover; } /* context */ .slide .content { position: absolute; bottom: 70px; left: -600px; opacity: 0; width: 600px; background-color: rgba(255, 255, 255, 0.8); color: #333; padding: 35px; } .slide .content h1 { margin-bottom: 10px; } .slide.current .content { opacity: 1; transition: all 0.7s ease-in-out 0.3s; transform: translateX(600px); } .buttons button#prev { position: absolute; top: 50%; left: 15px; } .buttons button#next { position: absolute; top: 50%; right: 15px; } .buttons button { border: #fff solid 2px; background-color: transparent; color: #fff; cursor: pointer; padding: 13px 15px; border-radius: 50%; outline: none; } .buttons button:hover { background-color: #fff; color: #333; } /* media queries */ @media (max-width: 500px) { .slide .content { bottom: -300px; left: 0; width: 100%; } .slide.current .content { transform: translateY(-300px); } }
3. js 脚本
const slides = document.querySelectorAll('.slide'); const next = document.getElementById('next'); const prev = document.getElementById('prev'); const nextSlide = function () { // get current class const current = document.querySelector('.current'); if (current.nextElementSibling) { // add current to next sibling current.nextElementSibling.classList.add('current'); } else { // add current to start slides[0].classList.add('current'); } // clear current setTimeout ( () => current.classList.remove('current')); }; const prevSlide = function () { // get current class const current = document.querySelector('.current'); if (current.previousElementSibling) { // add current to prve sibling current.previousElementSibling.classList.add('current'); } else { // add current to start slides[slides.length - 1].classList.add('current'); } // clear current setTimeout ( () => current.classList.remove('current')); }; // button event next.addEventListener('click', function () { nextSlide() }); prev.addEventListener('click', function () { prevSlide() });