滑块的过渡有错误

Question

我正在尝试创建 CSS 滑块，它在自动播放时运行良好，但当我自愿使用圆点时，它的过渡效果不佳。如果您已经知道，解决这个问题几乎不需要 5 分钟。请帮忙。或者你有什么其他的方法可以制作漂亮的滑块然后告诉我。

这些是下面给出的代码，请参阅运行并查看转换中的错误。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("psr_slides");
  var dots = document.getElementsByClassName("psr_slider_dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.width = "0";
    slides[i].classList.add("trans");
    // slides[i].style.transform = "translateX(100vw)";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.width = "100vw";
  slides[slideIndex - 1].classList.remove("trans");
  dots[slideIndex - 1].className += " active";
}

function autoInce(){
    for (let i = 1; i <= 10000; i++) {
        setTimeout(function(){ 
            plusSlides(1);
         }, i*5000);    
    }
}
autoInce();

*{
    margin: 0;
    padding: 0;
}
.psr_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.psr_slider{
    width: 100vw;
    height: 60vw;
}
.psr_slide{
    display: flex;
    flex-direction: column-reverse;
}
.psr_slide_1,.psr_slide_2,.psr_slide_3,.psr_slide_4{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 60vw;
    float: left;
    transition: all 1s;
}
.psr_slide_1{
    background: red;
}
.psr_slide_2{
    background: orange;
}
.psr_slide_3{
    background: pink;
}
.psr_slide_4{
    background: blue;
}
.psr_slider_right{
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}
.psr_slider_right svg{
    height: 64px;
}
.psr_slider_left{
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 100;
}

.psr_slider_dots{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.psr_slider_dot{
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #bbb;
    display: inline-block;
    opacity: 0.5;
    transition: 1s;
}
.active{
    opacity: 1 !important;
}

.trans{
    animation: move 1s;
}

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100vw); }
 }

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="psr_slider">
        <div class="psr_slide">
        <div class="psr_slides psr_slide_1"></div>
        <div class="psr_slides psr_slide_2"></div>
        <div class="psr_slides psr_slide_3"></div>
        <div class="psr_slides psr_slide_4"></div>
    </div>
        <div class="psr_slider_right" onclick="plusSlides(1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
        </div>
        <div class="psr_slider_left" onclick="plusSlides(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
              </svg>
        </div>
        <div class="psr_slider_dots">
            <div class="psr_slider_dot" onclick="currentSlide(1)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(2)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(3)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(4)"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Answer 1

现在，我自己回答我的问题。我现在得到答案，我哪里错了。我以前用width属性转，现在用transform转。 CSS 有一点变化，JS 代码在 HTML 没有变化。希望对你有帮助

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("psr_slides");
  var dots = document.getElementsByClassName("psr_slider_dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    var j = 100*i-(slideIndex-1)*100+"%";
    slides[i].style.transform = "translateX("+j+")";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideIndex - 1].className += " active";
}

function autoInce(){
    for (let i = 1; i <= 10000; i++) {
        setTimeout(function(){ 
            plusSlides(1);
         }, i*5000);    
    }
}
autoInce();

*{
    margin: 0;
    padding: 0;
}
.psr_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 40vw;
}
.psr_slide{
    display: flex;
    flex-direction: column-reverse;
}
.psr_slide_1,.psr_slide_2,.psr_slide_3,.psr_slide_4{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 40vw;
    /* overflow: hidden; */
    transition: all 1s;
}
.psr_slide_1{
    background: red;
}
.psr_slide_2{
    background: pink;
}
.psr_slide_3{
    background: yellow;
}
.psr_slide_4{
    background: green;
}
.psr_slider_right{
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}
.psr_slider_right svg{
    height: 64px;
}
.psr_slider_left{
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 100;
}

.psr_slider_dots{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.psr_slider_dot{
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #bbb;
    display: inline-block;
    opacity: 0.5;
    transition: 1s;
}
.active{
    opacity: 1 !important;
}

<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="psr_slider">
        <div class="psr_slide">
        <div class="psr_slides psr_slide_1"></div>
        <div class="psr_slides psr_slide_2"></div>
        <div class="psr_slides psr_slide_3"></div>
        <div class="psr_slides psr_slide_4"></div>
    </div>
        <div class="psr_slider_right" onclick="plusSlides(1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
        </div>
        <div class="psr_slider_left" onclick="plusSlides(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
              </svg>
        </div>
        <div class="psr_slider_dots">
            <div class="psr_slider_dot" onclick="currentSlide(1)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(2)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(3)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(4)"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

滑块的过渡有错误

There is error in the transition of the slider

html

javascript

css

slider