主页 / 问题 / 976559
Accepted
Dима Mих
Asked:2020-04-30 17:28:05 +0000 UTC2020-04-30 17:28:05 +0000 UTC

滑块无法正常工作JS

  • 772

当我启动滑块并立即按下右侧时 - 它工作，只要我按下左侧，然后再次向右 - 然后向右它停止工作。

document.getElementById("slideLeft").onclick = slideLeft;

var left = 600;
var slider = document.getElementById("slider");

function slideLeft() {
  left = left - 600;
  if (left < -1800) {
    left = 0;
  }
  slider.style.left = left + "px";
}
document.getElementById("slideRight").onclick = slideRight;
var right = 600;

function slideRight() {
  right = right + 600;
  if (right > 1800) {
    right = 0;
  }
  slider.style.right = right + "px";
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide {
  max-width: 604px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
}

#slider {
  width: 2400px;
  display: flex;
  position: relative;
  transition: all .5s ease-in;
}

#slider img {
  width: 600px;
  height: 380px;
  display: block;
  padding: 5px;
}

#slideLeft {
  position: relative;
  width: 50px;
  height: 384px;
  opacity: .2;
  right: -50px;
  z-index: 10;
  border: none;
  transition: all .3s ease-in;
}

#slideLeft:hover {
  opacity: .8;
}

#slideRight {
  position: relative;
  width: 50px;
  height: 384px;
  opacity: .2;
  right: 50px;
  z-index: 10;
  border: none;
  transition: all .3s ease-in;
}

#slideRight:hover {
  opacity: .8;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>slide</title>
  <link rel="stylesheet" href="style.css">
  <script src="js.js" defer></script>
</head>

<body>
  <button id="slideLeft">Left</button>
  <div class="slide">
    <div id="slider">
      <img src="https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1508050919630-b135583b29ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1499634231146-3393ed854a33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1460915159464-e3fc4d0b244b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </div>
  <button id="slideRight">Right</button>

</body>

</html>

帮助我了解问题是什么，为什么如果您向左按下滑块，右侧的滑块会立即停止工作。

javascript

1 个回答

  1. Best Answer

    同时安装css left和right运行时left

    要取消该属性，您可以使用 unset;

    document.getElementById("slideLeft").onclick = slideLeft;

var left = 600;
var slider = document.getElementById("slider");

function slideLeft() {
  left = left - 600;
  if (left < -1800) {
    left = 0;
  }
  slider.style.right = 'unset';
  slider.style.left = left + "px";
}
document.getElementById("slideRight").onclick = slideRight;
var right = 600;

function slideRight() {
  right = right + 600;
  if (right > 1800) {
    right = 0;
  }
   slider.style.left = 'unset';
  slider.style.right = right + "px";
}
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide {
  max-width: 604px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
}

#slider {
  width: 2400px;
  display: flex;
  position: relative;
  transition: all .5s ease-in;
}

#slider img {
  width: 600px;
  height: 380px;
  display: block;
  padding: 5px;
}

#slideLeft {
  position: relative;
  width: 50px;
  height: 384px;
  opacity: .2;
  right: -50px;
  z-index: 10;
  border: none;
  transition: all .3s ease-in;
}

#slideLeft:hover {
  opacity: .8;
}

#slideRight {
  position: relative;
  width: 50px;
  height: 384px;
  opacity: .2;
  right: 50px;
  z-index: 10;
  border: none;
  transition: all .3s ease-in;
}

#slideRight:hover {
  opacity: .8;
}
    <button id="slideLeft">Left</button>
<div class="slide">
  <div id="slider">
    <img src="https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1508050919630-b135583b29ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1499634231146-3393ed854a33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1460915159464-e3fc4d0b244b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
  </div>
</div>
<button id="slideRight">Right</button>

    • 1

相关问题