Javascript：如何在Javascript中更改CSS转换？

yx2lnoni 于 2023-02-06 发布在 Java

关注(0)|答案(3)|浏览(142)

我正在制作一个幻灯片，并使用了div的transform样式。

const prevSlide = document.getElementById('prev-slide');
const nextSlide = document.getElementById('next-slide');

const slides = document.getElementById('slides');
const slideList = [document.getElementsByClassName('slide-li')];

let slideNode = slideList[0]
let slideWidth = slideNode[0].clientWidth;

let slide = 0;

nextSlide.addEventListener('click', function e(){
  if (slide <= 0 && slide > -(slideWidth * (slideNode.length - 1))){
    slide -= slideWidth;
    slidePx = slide.toString() + "px";
    slides.style.transform = "translate("+slidePx+", 0px);";
  }
  else{
    slide = 0;
    slides.style.transform = "translate(0px, 0px);";
  }
})
prevSlide.addEventListener('click', function e(){
  if (slide < 0){
    slide += slideWidth;
    slidePx = slide.toString() + "px";
    slides.style.transform = "translate("+slidePx+", 0px);";
  }
  else{
    slide = slideWidth * (slideNode.length - 1);
    slidePx = slide.toString() + "px";
    slides.style.transform = "translate("+slidePx+", 0px);";
  }
})

body {
  background-color : white;
  }
#slide-container {
  margin           : 0 auto;
  width            : 500px;
  overflow         : hidden;
  position         : relative;
  }
#slides {
  margin           : 0 auto;
  height           : 400px;
  width            : 2000px;
  overflow         : hidden;
  display          : block;
  transition       : 1s ease;
  }
#slides:after {
  content          : "";
  display          : table;
  clear            : both;
  }
.slide-li {
  margin           : 0;
  display          : inline;
  width            : 25%;
  overflow         : hidden;
  float            : left;
  }
.slide-li img {
  width            : 500px;
  margin           : auto;
  }
#prev-slide, 
#next-slide {
  color            : white;
  padding          : 10px;
  font-size        : 20px;
  cursor           : pointer;
  z-index          : 5;
  position         : absolute;
  top              : 40%;
  font-weight      : bold;
  text-decoration  : none;
  transition       : 0.5s ease;
  }
#prev-slide {
  left             : 0;
  }
#next-slide {
  right            : 0;
  }
#prev-slide:hover, 
#next-slide:hover {
  background-color : #000000aa;
  }

<div id="slide-container">
  <div id="slides">
    <span class="slide-li"><img src="https://picsum.photos/id/1041/500/400/"></span>
    <span class="slide-li"><img src="https://picsum.photos/id/1035/500/400"></span>
    <span class="slide-li"><img src="https://picsum.photos/id/1040/500/400"></span>
  </div>
  <a class="btn" id="prev-slide">&#10094;</a>
  <a class="btn" id="next-slide">&#10095;</a>
</div>

当我尝试点按任一按钮来滑动幻灯片显示时，它不进行翻译。
当我尝试记录transform属性时，我没有看到任何内容。
我很确定我犯了一个关于变换性质的错误，但是我找不到它。问题是什么？

css

来源：https://stackoverflow.com/questions/68156291/javascript-how-to-alter-css-transform-in-javascript

3条答案

按热度按时间

pb3s4cty1#

只是替换了

slidePx = slide.toString() + "px";
slides.style.transform = `translate(${slidePx}, 0px);`;

作者

slides.style = `transform : translate(${slide}px, 0px)`

但是您可以将代码简化为：

const
  prevSlide  = document.getElementById('prev-slide')
, nextSlide  = document.getElementById('next-slide')
, slides     = document.getElementById('slides')
, slideList  = document.querySelectorAll('.slide-li')
, slideWidth = slideList[0].clientWidth
   ;
let slide = 0; 
   
nextSlide.onclick = e =>
  {
  slide = ++slide % slideList.length
  slides.style = `transform : translate(${-slide * slideWidth}px, 0px)`
  }
prevSlide.onclick = e =>
  {
  slide = (--slide + slideList.length) % slideList.length
  slides.style = `transform : translate(${-slide * slideWidth}px, 0px)`
  }

我还纠正了其他小错误
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-02-06

mspsb9vt2#

从style.transform行的字符串常量中删除分号。
它们应该如下所示：

slides.style.transform = "translate("+slidePx+", 0px)";

而不是这个：

slides.style.transform = "translate("+slidePx+", 0px)";

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-02-06

7dl7o3gd3#

用JS修改transform属性时不需要分号，使用slides.style.transform =translate(${slidePx}, 0px);即可

const prevSlide = document.getElementById("prev-slide");
const nextSlide = document.getElementById("next-slide");

const slides = document.getElementById("slides");
const slideList = [document.getElementsByClassName("slide-li")];

let slideNode = slideList[0];
let slideWidth = slideNode[0].clientWidth;

let slide = 0;

nextSlide.addEventListener("click", function e() {
    if (slide <= 0 && slide >- slideWidth * (slideNode.length - 1)) {
        slide -= slideWidth;
        slidePx = slide.toString() + "px";
        slides.style.transform = `translate(${slidePx}, 0px)`;
    } else {
        slide = 0;
        slides.style.transform = "translate(0px, 0px)";
    }
});
prevSlide.addEventListener("click", function e() {
    if (slide < 0) {
        slide += slideWidth;
        slidePx = slide.toString() + "px";
        slides.style.transform = "translate(" + slidePx + ", 0px)";
    } else {
        slide = slideWidth * (slideNode.length - 1);
        slidePx = slide.toString() + "px";
        slides.style.transform = "translate(" + slidePx + ", 0px)";
    }
});

body {
    background-color: white;
}
#slide-container {
    margin: 0 auto;
    width: 500px;
    overflow: hidden;
    position: relative;
}
#slides {
    margin: 0 auto;
    height: 400px;
    width: 2000px;
    overflow: hidden;
    display: block;
    transition: 1s ease;
}
#slides:after {
    content: "";
    display: table;
    clear: both;
}
.slide-li {
    margin: 0;
    display: inline;
    width: 25%;
    overflow: hidden;
    float: left;
}
.slide-li img {
    width: 500px;
    margin: auto;
}
#prev-slide,
#next-slide {
    color: white;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
    position: absolute;
    top: 40%;
    font-weight: bold;
    text-decoration: none;
    transition: 0.5s ease;
}
#prev-slide {
    left: 0;
}
#next-slide {
    right: 0;
}
#prev-slide:hover,
#next-slide:hover {
    background-color: #000000aa;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="slide-container">
            <div id="slides">
                <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span>
                <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span>
                <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span>
            </div>
            <a class="btn" id="prev-slide">&#10094;</a>
            <a class="btn" id="next-slide">&#10095;</a>
        </div>
    </body>
</html>

这就是你解决问题所需要的一切。

赞(0）回复(0）举报 2023-02-06

我来回答

Javascript：如何在Javascript中更改CSS转换？

3条答案

相关问题

热门标签

最新问答