javascript 单击按钮时如何更改translateX值？

tcbh2hod 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(197)

我是新来的。我想让我的按钮在被点击1170 px时改变translateX的值，但是当我检查网站时，我完全不明白onClick属性是如何在reactjs中呈现的。
下面是代码：

function Slideshow() {
  const slider = [
    { name: slide_logo_1, link: "https://timesrecords.lnk.to/CITOPIA" },
    {
      name: slide_logo_2,
      link: "https://store.hangdiathoidai.com/search?q=lana+del+rey",
    },
    { name: slide_logo_3, link: "https://timesrecords.lnk.to/TocTien-Cong" },
    { name: slide_logo_4, link: "https://timesrecords.lnk.to/TSMidnights" },
    { name: slide_logo_5, link: "https://timesrecords.lnk.to/LINK-HTL" },
  ];
  const getTranslateX = () => {
    var myElement = document.querySelector(".owl-wrapper");
    var style = window.getComputedStyle(myElement);
    var matrix = new DOMMatrix(style.transform);
    <Alert>{matrix}</Alert>
    
  };

  return (
    <section>
      <div className="wrapper">
        <div className="inner space-30 section-slider">
          <div
            className="slider-carousel owl-carousel owl-theme"
            id="slider-carousel"
            data-mobile="[479,1]"
            data-tabletsmall="[768,1]"
            data-desktopsmall="[979,1]"
            data-desktop="[1199,1]"
            data-pagination="false"
            data-navigation="true"
            data-autoplay="5000"
            data-items="1"
            style={{ display: "block", opacity: 1 }}
          >
            <div
              className="owl-wrapper-outer autoHeight"
              style={{ height: 431 }}
            >
              <div
                className="owl-wrapper"
                style={{
                  width: 11700,
                  left: 0,
                  display: "block",
                  transition: `all 400ms ease 0s`,
                  transform: `translate3d(0px, 0, 0)`,
                }}
              >
                {slider.map((products, index) => {
                  return (
                    <div className="owl-item" style={{ width: 1170 }}>
                      <div className="text-center">
                        <Link
                          className="slide"
                          to={products.link}
                          title=""
                          key={index}
                        >
                          <img src={products.name} alt="" />
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="owl-controls clickable">
              <div className="owl-buttons">
                <div
                  className="sangtrai owl-prev"
                  onClick={getTranslateX}
                ></div>
                <div className="sangphai owl-next"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Slideshow;

这里的情况是，当我单击**.sangtrai时，.owl-wrapper的transform中的translateX值将增加1170 px的数量，当我单击.sangphai时，.owl-wrapper的transform中的translateX值将减少170 px**的数量

JavaScript

来源：https://stackoverflow.com/questions/76328767/how-can-i-change-translatex-value-when-a-button-is-clicked

1条答案

按热度按时间

2w2cym1i1#

我只能建议您拆分此功能并为此创建单独的函数。此外，一点状态管理也可能会有所帮助。
添加状态和单独的函数来维护x值：

const [translateX, setTranslateX] = useState(0);

  const handlePrevClick = () => {
    setTranslateX(translateX + 1170);
  };

  const handleNextClick = () => {
    setTranslateX(translateX - 1170);
  };

然后使用.slider-carousel更新div以使用此状态值：

<div className="owl-wrapper" style={{
    width: 11700,
    left: 0,
    display: "block",
    transition: `all 400ms ease 0s`,
    transform: `translate3d(${translateX}px, 0, 0)`,
  }}>

最后对分离的事件调用分离的函数：

<div className="sangtrai owl-prev" onClick={handlePrevClick}></div>
<div className="sangphai owl-next" onClick={handleNextClick}></div>

注意：我没有测试过上面的代码，但如果它不能按预期工作，它可能是一种方法，可以帮助。干杯！

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 单击按钮时如何更改translateX值？

1条答案

相关问题

热门标签

最新问答