Question

出于某种原因，我试图创建一个vanilla JavaScript轮播。我有两个问题： 1.图像向左移动的宽度为-680px，但是当我尝试为右按钮创建相同的功能时，左边的值变为1370px，使图像离开屏幕。 2.我希望它向左滑动而向右滑动（右侧相同），我设法让它做到这一点，但它不能在第一张幻灯片上工作，只能从第二张幻灯片开始。以下是仅适用于轮播的HTML代码：

<div id = "container">
  <div id = "carousel">
   <div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
   <div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
   <div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
   <div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
  </div>
</div>

<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>

这是CSS代码：

#container {
   position: absolute;
   top: 200px;
   left: 100px;
   width: 680px;
   height: 360px;
   white-space: nowrap;
   overflow:hidden;
}

#carousel {
   position: absolute;
   width: 2740px;
   height: 360px;
   white-space: nowrap;
   overflow: hidden;
   transition: left 300ms linear;
}

.slide {
   display: inline-block;
   height: 360px;
   width: 680px;
   padding: 0;
   margin: 0;
   transition: left 300ms linear;
}

.slideImage {
   position:relative;
   height: 360px;
   width: 680px;
   float: left;
}

.button {
   position: absolute;
   top: 340px;
   height: 60px;
   width: 60px;
   border-bottom: 12px solid red;
}

#left {
   left: 115px;
   border-left: 12px solid red;
   transform: rotate(45deg);
}

#right {
   left: 693px;
   border-right: 12px solid red;
   transform: rotate(-45deg);
}

这是JavaScript：

var carousel = document.querySelector('#carousel');
var firstVal = 0;

document.querySelector('#left').addEventListener("click", moveLeft);

function moveLeft (){
  firstVal +=685;
  carousel.style.left = "-"+firstVal+"px";
};

document.querySelector('#right').addEventListener("click", moveRight);

function moveRight() {
  firstVal +=685;
  carousel.style.left = "+"+firstVal+"px";
};

这是一个JSFiddle，你可以看到我的意思：＆＃34; https://jsfiddle.net/way81/8to1kkyj/＆＃34;

感谢您抽出时间阅读我的问题，我们将非常感谢您的帮助。

Answer 1

当然，它在左键单击时从-685px开始，然后在右键单击时从+1370px开始;您总是在firstVal变量中添加685。

firstVal = 0
//firstVal is worth 0

moveLeft()
//firstVal is now worth 685

moveRight()
//firstVal is now worth 1370.

问题在于，当您在javascript中将firstVal应用于CSS内容时，您会创建一个字符串来获取您的负值（在firstVal前面应用“ - ”符号的位置）

相反，像这样写

function moveLeft (){
  firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
  carousel.style.left = firstVal + "px";
};

function moveRight() {
  firstVal +=685;
  carousel.style.left = firstVal + "px";
};

Answer 2

＆＃13;

var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);

var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);

var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;


//slide image to the left side <--
function moveRight() {
  if (position > (minPos + interval)) {
    position -= interval;
    carousel.style.left = position + "px";
  }

  if (position === (minPos + interval)) {
    right.style.display = "none";
  }

  left.style.display = "block";
}


//slide image to the right side -->
function moveLeft() {
  if (position < (maxPos - interval) && position < 0) {
    position += interval;
    carousel.style.left = position + "px";
  }

  if (position === 0) {
    left.style.display = "none";
  }

  right.style.display = "block";
}

＆＃13;

 #container {
   position: absolute;
   top: 200px;
   left: 100px;
   width: 680px;
   height: 360px;
   white-space: nowrap;
   overflow: hidden;
 }
 #carousel {
   position: absolute;
   width: 2740px;
   height: 360px;
   white-space: nowrap;
   overflow: hidden;
   transition: left 300ms linear;
 }
 .slide {
   display: inline-block;
   height: 360px;
   width: 680px;
   padding: 0;
   margin: 0;
   transition: left 300ms linear;
 }
 .slideImage {
   position: relative;
   height: 360px;
   width: 680px;
   float: left;
 }
 .button {
   position: absolute;
   top: 340px;
   height: 60px;
   width: 60px;
   border-bottom: 12px solid red;
 }
 #left {
   left: 115px;
   border-left: 12px solid red;
   transform: rotate(45deg);
   display: none;
 }
 #right {
   left: 693px;
   border-right: 12px solid red;
   transform: rotate(-45deg);
 }

＆＃13;

<div id="container">
  <div id="carousel">
    <div class="slide">
      <img class="slideImage" class="active" src="sithCover.png" alt="slide1">
    </div>
    <div class="slide">
      <img class="slideImage" src="darthVader.png" alt="slide2">
    </div>
    <div class="slide">
      <img class="slideImage" src="darthSidious.png" alt="slide3">
    </div>
    <div class="slide">
      <img class="slideImage" src="kyloRen.png" alt="slide4">
    </div>
  </div>
</div>

<div id="left" class="button"></div>
<div id="right" class="button"></div>

＆＃13;

修复一个香草Javascript轮播的右键

2 个答案: