微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

滑块的过渡有错误

分类：编程问答

如何解决滑块的过渡有错误

我正在尝试创建 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>

解决方法

现在，我自己来回答我的问题。我现在得到了答案，我错了。 我曾经在使用 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot