滑块动画帮助

我有一个包含 5 个图像的滑块，并且图像具有不同的尺寸，我正在尝试使它们之间的调整大小动画效果良好

在这段代码中，我在每个图像上放置了动画，我有兴趣纠正的动画尤其是“中”图像的动画，动画准备从“小”到“中”。
如果我把它移到左边，你就可以做到这一点，也就是说，如果我们有这个订单

1 | 2 | 3 | 4 | 5
看起来像这样将其向左移动：
2 | 3 | 4 | 5 | 6.

鉴于此示例情况，具有正确动画的图像是 5，因为它从“小”变为“中”，但看起来很糟糕的图像是 3，它必须从“大”变为“中” .

`

登录后复制

图像滑块



正文 {

字体系列：arial、无衬线体；

背景颜色：#f0f0f0;

显示：flex;

调整内容：center;

对齐项目：中心；

高度：100vh;

边距：0;

}

 .slider-container {

        宽度：80%；

        溢出：隐藏；

        位置：相对；

        高度：400px；

    }
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 20%;
    box-sizing: border-box;
    transition: transform 0.5s ease;
}

.slide h2, .slide p {
    opacity: 0;
    transform: translatey(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide.hide-text h2,
.slide.hide-text p {
    display: none;
}

.show-text h2, .show-text p {
    animation: fadein .9s ease forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

img {
    width: 100%;
    display: block;
    margin: 5px 0;
}

.small {
    margin-top: 48px;
    animation: fadeon .5s ease forwards;
}

@keyframes fadeon {
    from {
        scale: 0.8;
    }
    to {
        scale: .7;
    }
}

.medium {
    margin-top: 67px;
    animation: fadeon-2 .5s ease forwards;
}

@keyframes fadeon-2 {
    from {
        scale: 0.7;
    }
    to {
        scale: .9;
    }
}

.large {
    margin: 0 4px;
    animation: fadeon-3 .5s ease forwards;
}

@keyframes fadeon-3 {
    from {
        scale: 0.85;
    }
    to {
        scale: 1;
    }
}



.nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translatey(-50%);
}

.prev, .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

div {
    display: flex;
    flex-direction: column;
}

h2,p {
    text-align: center;
}

p {
    font-size: 10px;
    margin-top: -20px;
}
  登录后复制   
风格>
  

 


 

 

  

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
服务
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
title
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

 
title
 

 

 
 

 

 
创造难忘的订婚体验！不仅在您梦想的地点拍摄令人惊叹的照片和视频，之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。
 

 

  

 

  

 

  

 

  

 

  

 

  

 

  

   

  登录后复制    

 
let slipindex = 0;

 const slides = document.getelementsbyclassname("slide");

 const slider = document.queryselector(".slider");

 const slidestoshow = 5;

 const slidewidth = 100 / slipstoshow;
 
 
function plusslides(n) {

 slideindex += n;

 if (slideindex > slips.length - slidestoshow) {

 slideindex = 0;

 } else if (slideindex 
 slideindex =幻灯片.length-slidestoshow;

 }

 showslides();

 }
 
 
function showslides() {

 slider.style.transform = 'translatex(' + (-slideindex * slidewidth) + '%)';
 

   
for (let i = 0; i 
    slides[i].classlist.remove("小", "中", "大", "隐藏文本", "显示文本");
if (i === (slideIndex + 2) % slides.length) {
    slides[i].classList.add("large");
    slides[i].classList.add("show-text");
} else if (i === (slideIndex + 1) % slides.length || i === (slideIndex + 3) % slides.length) {
    slides[i].classList.add("medium", "hide-text");
} else if (i === slideIndex || i === (slideIndex + 4) % slides.length) {
    slides[i].classList.add("small", "hide-text");
} else {
    slides[i].classList.add("small", "hide-text");
}
  登录后复制   
}
  

 
}
 
 
showslides();





 
以上就是滑块动画帮助的详细内容，更多请关注慧达安全导航其它相关文章！