其他
【每日一练】42—垂直轮播图效果的实现
写在前面
轮播图的案例，我们在前面的练习中也分享过，但是这种垂直的轮播动画，之前我们看的很多效果，基本都是横向居多，并且文字也是放在图片上面或者图片之下，总之，就是为了节省页面空间。
但是，我们今天这个样式，再节省页面空间上，可能会感觉不那么友好。
今天这个效果，也有它的优势，比方左边的纯色背景，会使文字易读，有了很多发挥空间。
好了，我们现在一起来看一下，今天的这个练习效果：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" /> <title>【每日一练】42—垂直轮播图效果的实现</title> </head> <body> <div class="slider-container"> <div class="left-slide"> <div style="background-color: #789d58"> <h1>走在校园走廊里的少女</h1> <p>校园美女</p> </div> <div style="background-color: #9d2741"> <h1>校园小清新美女</h1> <p>校园美女</p> </div> <div style="background-color: #252E33"> <h1>教室中看书调皮的美女</h1> <p>校园美女</p> </div> <div style="background-color: #87994d"> <h1>校园中的可爱少女</h1> <p>校园美女</p> </div> </div> <div class="right-slide"> <div style="background-image: url('images/01.jpg')"></div> <div style="background-image: url('images/02.jpg')"></div> <div style="background-image: url('images/03.jpg')"></div> <div style="background-image: url('images/04.jpg')"></div> </div> <div class="action-buttons"> <button class="down-button"> <i class="fa fa-arrow-down"></i> </button> <button class="up-button"> <i class="fa fa-arrow-up"></i> </button> </div> </div> </body></html>* { box-sizing: border-box; margin: 0; padding: 0;}
body { font-family: 'Open Sans', sans-serif; height: 100vh;}
.slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh;}
.left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out;}
.left-slide > div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;}
.left-slide h1 { font-size: 40px; margin-bottom: 10px; margin-top: -30px;}
.right-slide { height: 100%; position: absolute; top: 0; left: 35%; width: 65%; transition: transform 0.5s ease-in-out;}
.right-slide > div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%;}
button { background-color: #fff; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 15px;}
button:hover { color: #222;}
button:focus { outline: none;}
.slider-container .action-buttons button { position: absolute; left: 35%; top: 50%; z-index: 100;}
.slider-container .action-buttons .down-button { transform: translateX(-100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.slider-container .action-buttons .up-button { transform: translateY(-100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px;}const sliderContainer = document.querySelector('.slider-container')const slideRight = document.querySelector('.right-slide')const slideLeft = document.querySelector('.left-slide')const upButton = document.querySelector('.up-button')const downButton = document.querySelector('.down-button')const slidesLength = slideRight.querySelectorAll('div').length
let activeSlideIndex = 0
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
upButton.addEventListener('click', () => changeSlide('up'))downButton.addEventListener('click', () => changeSlide('down'))
const changeSlide = (direction) => { const sliderHeight = sliderContainer.clientHeight if(direction === 'up') { activeSlideIndex++ if(activeSlideIndex > slidesLength - 1) { activeSlideIndex = 0 } } else if(direction === 'down') { activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesLength - 1 } }
slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`}写在最后
以上就是我们今天的【每日一练】全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号