修复香草Javascript旋转木马的右按钮

出于种种原因，我正在尝试创建一个香草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>

下面是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";
};

下面是一个JSFIDLE，您可以了解我的意思： “”

---

非常感谢您抽出时间阅读我的问题，如果您能提供帮助，我将不胜感激。

当然，它从左键单击

-685px

，然后右键单击

+1370px

；您总是将685添加到

firstVal

变量中

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";
};

---

当然，它从左键单击时的

-685px

，到下一次右键单击时的

+1370px

；您总是将685添加到

firstVal

变量中

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";
};

var left=document.getElementById（“left”）；
left.addEventListener（“单击”，向左移动，false）；
var right=document.getElementById（“right”）；
右。addEventListener（“单击”，右移，假）；
var carousel=document.getElementById（“carousel”）；
var images=document.getElementsByTagName（“img”）；
var位置=0；
var区间=685；
var minPos=（“-”+区间）*images.length；
var maxPos=间隔*图像.length；
//将图像滑到左侧（minPos+间隔））{
位置-=间隔；
carousel.style.left=位置+“px”；
}
如果（位置==（最小位置+间隔））{
right.style.display=“无”；
}
left.style.display=“block”；
}
//将图像滑到右侧-->
函数moveLeft（）{
if（位置<（最大位置-间隔）和位置<0）{
位置+=间隔；
carousel.style.left=位置+“px”；
}
如果（位置===0）{
left.style.display=“无”；
}
right.style.display=“block”；
}

#容器{
位置：绝对位置；
顶部：200px；
左：100px；
宽度：680px；
高度：360px；
空白：nowrap；
溢出：隐藏；
}
#旋转木马{
位置：绝对位置；
宽度：2740px；
高度：360px；
空白：nowrap；
溢出：隐藏；
过渡：左300ms线性；
}
.幻灯片{
显示：内联块；
高度：360px；
宽度：680px；
填充：0；
保证金：0；
过渡：左300ms线性；
}
slideImage先生{
位置：相对位置；
高度：360px；
宽度：680px；
浮动：左；
}
.按钮{
位置：绝对位置；
顶部：340px；
高度：60px；
宽度：60px；
边框底部：12px实心红色；
}
#左{
左：115px；
左边框：12px实心红色；
变换：旋转（45度）；
显示：无；
}
#对{
左：693px；
右边框：12px实心红色；
变换：旋转（-45度）；
}

var left=document.getElementById（“left”）；
left.addEventListener（“单击”，向左移动，false）；
var right=document.getElementById（“right”）；
右。addEventListener（“单击”，右移，假）；
var carousel=document.getElementById（“carousel”）；
var images=document.getElementsByTagName（“img”）；
var位置=0；
var区间=685；
var minPos=（“-”+区间）*images.length；
var maxPos=间隔*图像.length；
//将图像滑到左侧（minPos+间隔））{
位置-=间隔；
carousel.style.left=位置+“px”；
}
如果（位置==（最小位置+间隔））{
right.style.display=“无”；
}
left.style.display=“block”；
}
//将图像滑到右侧-->
函数moveLeft（）{
if（位置<（最大位置-间隔）和位置<0）{
位置+=间隔；
carousel.style.left=位置+“px”；
}
如果（位置===0）{
left.style.display=“无”；
}
right.style.display=“block”；
}

#容器{
位置：绝对位置；
顶部：200px；
左：100px；
宽度：680px；
高度：360px；
空白：nowrap；
溢出：隐藏；
}
#旋转木马{
位置：绝对位置；
宽度：2740px；
高度：360px；
空白：nowrap；
溢出：隐藏；
过渡：左300ms线性；
}
.幻灯片{
显示：内联块；
高度：360px；
宽度：680px；
填充：0；
保证金：0；
过渡：左300ms线性；
}
slideImage先生{
位置：相对位置；
高度：360px；
宽度：680px；
浮动：左；
}
.按钮{
位置：绝对位置；
顶部：340px；
高度：60px；
宽度：60px；
边框底部：12px实心红色；
}
#左{
左：115px；
左边框：12px实心红色；
变换：旋转（45度）；
显示：无；
}
#对{
左：693px；
右边框：12px实心红色；
变换：旋转（-45度）；
}

moveLeft+=685，moveRight+=685？其中一个不应该是-=685吗？或者-=1370？左移+=685，右移+=685？其中一个不应该是-=685吗？或者-=1370？NachoDawg，谢谢。我没有考虑到“-”是一个字符串，我认为firstVal现在是-685，所以要使它回到0，我必须加上685。它解决了我的问题！你的回答很清楚，谢谢。我没有考虑到“-”是一个字符串，我认为firstVal现在是-685，所以要让它回到0，我必须加6