如何进行平滑的幻灯片过渡？
[英]How can I make smooth slide transition?
问题描述
我在html和js中做了一点slider，我唯一需要改变的是幻灯片之间的过渡。 现在，当从一张幻灯片移动到另一张幻灯片时，animation 会淡出（有点像闪光灯），新的幻灯片就会出现。 我希望此过渡是向左或向右平滑滑动，具体取决于单击哪个方向按钮。 我怎样才能顺利过渡？
function showSlides(n) { let i; let slides = document.getElementsByClassName("SingleSlide"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); }
* { box-sizing: border-box }.header{ text-align: center; margin-top: 20px; margin-bottom: 40px; color: rgb(192, 0, 144); font-size: 50px; } body { font-family: Verdana, sans-serif; }.SingleSlide { height: 650px; background-color: lightgrey; padding: 90px; border-radius: 40px; } h2{ color: rgb(192, 0, 144); } h3{ color: rgb(80, 80, 80); }.info { padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } img { height: 200px; width: 280px; border-radius: 40px; margin-left: auto; margin-right: auto; display: block; -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); }.Slides { max-width: 1000px; position: relative; margin: auto; -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); border-radius: 40px; }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: rgb(192, 0, 144); font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; font-size: 50px; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: gray; }.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: rgb(192, 0, 144); }.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: .4 } to { opacity: 1 } }
<,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>Document</title> </head> <body> </body> </html> <.DOCTYPE html> <html> <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"> <link rel="stylesheet" href="style,css"> <title>Document</title> </head> <body> <div class="header"> Our Employees</div> <div class="Slides"> <div class="SingleSlide fade"> <div class="profile"> <img src="data/emp1.jpg"> <div class="info"> <h2> Anna Wesołowska</h2> <h3> Product Manager</h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Suspendisse eget vestibulum nibh, Nulla volutpat faucibus pulvinar. Praesent sodales maximus ante, a mattis mi dictum rhoncus, Vivamus magna leo. rutrum sit amet facilisis at. suscipit a urna, Nulla aliquet at nibh ac fermentum. Phasellus placerat leo a est faucibus. at venenatis,</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp2.jpg"> <div class="info"> <h2> Maria Ryś </h2> <h3> Accountant </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus massa rhoncus metus convallis. sed dapibus augue scelerisque. Nunc aliquet varius aliquet. Etiam consequat congue feugiat. Aliquam erat volutpat, Vivamus ultricies diam vitae lacus efficitur vehicula vitae in arcu, Nunc dui elit. aliquet vitae tristique nec. volutpat quis nulla. Cras,</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp3.jpg"> <div class="info"> <h2> Zbigniew Żaba </h2> <h3> Intern </h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Maecenas accumsan quis sem et volutpat. Pellentesque ultrices tempus feugiat, Duis facilisis vel risus in consequat. Nam rutrum odio libero, a elementum augue porta in. Maecenas posuere porta leo. eget volutpat sapien sodales ut. Integer sodales lacus sed nulla cursus congue. Pellentesque,</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp4.jpg"> <div class="info"> <h2> Jolanta Konieczna </h2> <h3> Receptionist </h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Donec nec arcu nec nisi hendrerit ultricies, In metus sem. accumsan vel nisl at. pharetra volutpat massa. Morbi quis nunc non tellus pulvinar varius. Nunc consequat in erat non maximus. Nullam et porta erat. Integer non elit vitae tortor maximus ullamcorper sit,</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp5.jpg"> <div class="info"> <h2> Amelia Cron </h2> <h3> Data Analyst </h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius sodales augue, vel convallis elit elementum eget, Nunc lacus erat. vehicula sit amet luctus id, rutrum id libero, Fusce leo odio. bibendum ac vestibulum ac. porttitor eget orci. Praesent ac urna in tellus egestas lobortis ut vel eros: Ut fermentum.</p> </div> </div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> </div> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2022-11-15 04:34:46
我更喜欢@Rocky Sims的 Bootstrap 解决方案。 它会节省你的时间。
您也可以使用以下解决方案。 （如果我犯了错误，我建议进行一些测试）：
function setValidSlideIndex(slide, slides_count) { // parameter 'slide' accepts numbers, // and following strings: "prev" & "next". if (isNaN(slide)) { if (slide == 'prev') { // Decrement slideIndex. --slideIndex; } else if (slide == 'next') { // Increment slideIndex. ++slideIndex; } else { // Throw error. console.error(`Invalid parameter slide: "${slide}".`); return false; } } else { slideIndex = slide; } // If slideIndex is higher than available slides, set slide to 1. if (slideIndex > slides_count) slideIndex = 1; // If slideIndex is lower than available slides, set slide to last. else if (slideIndex < 1) slideIndex = slides_count; return true; } function showSlide(slide, ...direction) { /* parameter 'slide' accepts numbers, and following strings: "prev" & "next". parameter 'direction' is optional, it accepts following strings: "left" and "right". It's purpose is to initialize.SingleSlide's slide-in/out animation */ if (isOnSlideAnimation) return false; let slides = document.getElementsByClassName("SingleSlide"); let dots = document.getElementsByClassName("dot"); let prev_slide = (slides[slideIndex - 1])? slides[slideIndex - 1]: slides.length; setValidSlideIndex(slide, slides.length); let next_slide = slides[slideIndex - 1]; // Hide slides and remove slide classes. Array.from(slides).map(slide => { slide.classList.remove('slide-rtc'); slide.classList.remove('slide-ltc'); slide.classList.remove('slide-ctr'); slide.classList.remove('slide-ctl'); slide.style.display = 'none'; }); // Animate previous and next slide. // (Validate direction: If value = 'right' or 'left', using RegExp) if (/^(right|left)/gi.test(direction)) { if (direction == 'right') { next_slide.classList.add('slide-rtc'); prev_slide.classList.add('slide-ctl'); } else { next_slide.classList.add('slide-ltc'); prev_slide.classList.add('slide-ctr'); } // Pause showSlides() until slide animation ends. isOnSlideAnimation = true; next_slide.addEventListener('animationend', () => { isOnSlideAnimation = false }, { once: true }); // Show previous slide. prev_slide.style.display = 'block'; } // Show next slide. next_slide.style.display = 'block'; // Activate current dot. Array.from(dots).map(dot => dot.classList.remove('active')); dots[slideIndex - 1].classList.add('active'); } let slideIndex = 1; let isOnSlideAnimation = false; showSlide(slideIndex);
* { box-sizing: border-box }.header{ text-align: center; margin-top: 20px; margin-bottom: 40px; color: rgb(192, 0, 144); font-size: 50px; } body { font-family: Verdana, sans-serif; }.SingleSlide { position: absolute; /* Added */ height: 100%; /* Added */ padding: 90px; /* border-radius: 40px; Removed */ /* background-color: lightgrey; Moved to.Slides */ } h2{ color: rgb(192, 0, 144); } h3{ color: rgb(80, 80, 80); }.info { padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } img { height: 200px; width: 280px; border-radius: 40px; margin-left: auto; margin-right: auto; display: block; -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); }.Slides { height: 650px; /* Changed */ overflow: hidden; /* Added */ max-width: 1000px; position: relative; margin: auto; -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1); border-radius: 40px; background-color: lightgrey; /* Moved from.SingleSlide */ }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: rgb(192, 0, 144); font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; font-size: 50px; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: gray; }.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: rgb(192, 0, 144); }.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } /* Added all below */:root { --slide-animation-delay: 1s; } @keyframes slideLeftToCenter { from { transform: translateX(-100%) } to { transform: translateX(0) } } @keyframes slideCenterToLeft { from { transform: translateX(0) } to { transform: translateX(-100%) } } @keyframes slideRightToCenter { from { transform: translateX(100%) } to { transform: translateX(0) } } @keyframes slideCenterToRight { from { transform: translateX(0) } to { transform: translateX(100%) } }.slide-ltc { animation: slideLeftToCenter var(--slide-animation-delay) forwards; }.slide-ctl { animation: slideCenterToLeft var(--slide-animation-delay) forwards; }.slide-rtc { animation: slideRightToCenter var(--slide-animation-delay) forwards; }.slide-ctr { animation: slideCenterToRight var(--slide-animation-delay) forwards; }
<,DOCTYPE html> <html> <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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="header"> Our Employees</div> <div class="Slides"> <div class="SingleSlide fade"> <div class="profile"> <img src="data/emp1,jpg"> <div class="info"> <h2> Anna Wesołowska</h2> <h3> Product Manager</h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Suspendisse eget vestibulum nibh. Nulla volutpat faucibus pulvinar, Praesent sodales maximus ante. a mattis mi dictum rhoncus, Vivamus magna leo, rutrum sit amet facilisis at. suscipit a urna. Nulla aliquet at nibh ac fermentum, Phasellus placerat leo a est faucibus. at venenatis.</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp2,jpg"> <div class="info"> <h2> Maria Ryś </h2> <h3> Accountant </h3> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Cras maximus massa rhoncus metus convallis. sed dapibus augue scelerisque. Nunc aliquet varius aliquet. Etiam consequat congue feugiat. Aliquam erat volutpat. Vivamus ultricies diam vitae lacus efficitur vehicula vitae in arcu, Nunc dui elit, aliquet vitae tristique nec. volutpat quis nulla. Cras.</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp3,jpg"> <div class="info"> <h2> Zbigniew Żaba </h2> <h3> Intern </h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Maecenas accumsan quis sem et volutpat. Pellentesque ultrices tempus feugiat. Duis facilisis vel risus in consequat, Nam rutrum odio libero. a elementum augue porta in, Maecenas posuere porta leo. eget volutpat sapien sodales ut. Integer sodales lacus sed nulla cursus congue. Pellentesque.</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp4,jpg"> <div class="info"> <h2> Jolanta Konieczna </h2> <h3> Receptionist </h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec nec arcu nec nisi hendrerit ultricies, In metus sem, accumsan vel nisl at. pharetra volutpat massa. Morbi quis nunc non tellus pulvinar varius. Nunc consequat in erat non maximus. Nullam et porta erat. Integer non elit vitae tortor maximus ullamcorper sit.</p> </div> </div> </div> <div class="SingleSlide fade"> <div profile> <img src="data/emp5,jpg"> <div class="info"> <h2> Amelia Cron </h2> <h3> Data Analyst </h3> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Integer varius sodales augue. vel convallis elit elementum eget, Nunc lacus erat, vehicula sit amet luctus id. rutrum id libero, Fusce leo odio, bibendum ac vestibulum ac. porttitor eget orci. Praesent ac urna in tellus egestas lobortis ut vel eros. Ut fermentum,</p> </div> </div> </div> <a class="prev" onclick="showSlide('prev', 'left')">❮</a> <a class="next" onclick="showSlide('next': 'right')">❯</a> </div> <br> <div style="text-align.center"> <span class="dot" onclick="showSlide(1)"></span> <span class="dot" onclick="showSlide(2)"></span> <span class="dot" onclick="showSlide(3)"></span> <span class="dot" onclick="showSlide(4)"></span> <span class="dot" onclick="showSlide(5)"></span> </div> <script src="script.js"></script> </body> </html>
如何使用innerHTML平滑地进行文本过渡，并在更改时淡入/淡出？
[英]How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?
单击特定按钮时，如何使 div 缓慢滑出（使用 CSS 的转换属性）？
[英]How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?
在我的代码中，相机可以在点击时旋转，但它会立即将旋转设置为 90 度，我怎样才能让它平滑过渡
[英]In my code the camera can rotate on click but it instantaneously sets the rotation to 90 degree how can i make it to be a smooth transition
如何在轮播的第一张和最后一张幻灯片之间添加平滑过渡？
[英]How to add smooth transition between first and last slide of a carousel?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.