使用纯Javascript进行图像旋转

Question

请不要推荐JQUERY-我正在做此练习以学习目的。

我已经实现了JavaScript，该JavaScript使用设置的10秒间隔在计时器上旋转图像（_elementSlideChange）。 另外，我还为此添加了幻灯片功能，即7毫秒（_slideImage）。

图像在页面加载时每10秒自动旋转一次，我还提供了下一个和上一个按钮，允许用户手动更改图像。

_elementSlideChange: function () {
  var myString;
  var myText;
  for (var i = 0; i < this._imgArray.length; i++) {
    var imageArr = "url(" + this._imgArray[i].src + ")";
    var imageBg = this._imageHolder.style.background + "";
    if (imageArr == imageBg) {
      if (i == (this._imgArray.length - 1)) {
        myString = "url(" + this._imgArray[0].src + ")";
        myText = this._infoArray[0];
      } else {
        myString = "url(" + this._imgArray[(i + 1)].src + ")";
        myText = this._infoArray[i + 1];
      }
    }
  }
  this._imageNextSlide.style.background = myString;
  this._imageNextSlide.style.background);
  this._infoElement.innerHTML = myText;
  this._myTimer = setInterval(MyProject.Utils.createDelegate(this._slideImage, this),  7);
},
_slideImage: function () {
  if (parseInt(this._imageHolder.style.width) >= 0 && parseInt(this._imageNextSlide.style.width) <= 450) {
    this._imageHolder.style.backgroundPosition = "right";
    this._imageHolder.style.width = (parseInt(this._imageHolder.style.width) - 1) + 'px';
    console.log(this._imageNextSlide.style.background);
    this._imageNextSlide.style.width = (parseInt(this._imageNextSlide.style.width) + 1) + 'px';
  } else {
    console.log("reached 0px");
    if (parseInt(this._imageHolder.style.width) == 0) {
      this._imageHolder.style.background = this._imageNextSlide.style.background;
      this._imageHolder.style.width = 450 + 'px';
      this._imageHolder === this._imageNextSlide;
      this._imageHolder.className = "orginalImage";
      this._imageNextSlide.style.width = 0 + "px";
      this._imageNextSlide = this._dummyImageNextSlide;
      this._imagesElement.appendChild(this._imageHolder);
      this._imagesElement.appendChild(this._imageNextSlide);
      clearInterval(this._myTimer);
    }
    clearInterval(this._myTimer);
    clearInterval(this._elementSlideChange);
  }
}

因此，当用户单击“下一步”箭头按钮时，将触发“单击”事件侦听器。 这将为显示的当前图像创建一个div，并创建一个新的div，其中将包含下一个图像。 图像滑动和旋转均正常工作（无论是onLoad还是onClick ）。 我遇到的问题是，当我单击“下一步”按钮时，当新的div图像滑动到适当位置时，它将导致它陷入无限循环，因此与要显示的图像相同的div会继续滑动，并且单击下一步按钮，图像开始旋转的速度越快。

我尝试为图像旋转和滑块设置一个明确的间隔，但是我确实理解我的代码是错误的，这会导致滑动图像的无限循环。 而且我知道我即将完成该功能。

谁能告诉我我哪里可能出问题了？ 还是应该尝试以其他方式实现滑动DIV？

再次请不要推荐jQuery。

并感谢您的事先帮助。

库什

Answer 1

似乎您想取消幻灯片上的动画（在下一张幻灯片进行动画处理时，它可能会淡出，突然取消动画或让它结束并忽略按钮单击）

我个人通常要做的是检查动画状态（是的，我使用jquery，但是您应该能够以相同的方式测试用于动画的CSS或定位值），甚至可以添加“活动”动画过程中的类或数据类型，以使测试更加容易。 全局标志也起作用。 如果有动画，请忽略该按钮。 （对于我的工作...取决于您的意图）

就像我说的那样，问题可能出在按钮行为上，而不是动画程序上。 看看您如何通过单击按钮来调用它，以及预期的结果将是有用的。

Answer 2

为了解决该问题，我确实重写了整个代码，在该代码中有一个下一个和上一个按钮事件侦听器。

myProject.Utils.addHandler(this._nextImageElement, "click", myProject.Utils.createDelegate(this._changeImage, this));

这两个按钮将调用相同的功能：

_changeImage: function (e)

在此函数中，我检查函数是否为Transition（更改图像），并声明一个布尔型var forward = e.target == this._nextImageElement;

然后检查以查看当前索引是否向前？ 加1减去1

this._currentImageIndex += forward ? 1 : -1;

如果其在Array的末尾并为true，则将this._currentImageIndex分配为重置为0或Array.length –如果为反向则为1

然后调用另一个赋予'div'滑动效果的函数。 在这种情况下，将其this._transitionImage(forward);

在此函数中，将this._inTranstion设置为true。 （因为在这种情况下div滑动）。

以下代码解决了我遇到的问题。

this._slideImageElement.style.backgroundImage = "url(\"" + this._imgArray[this._currentImageIndex].src + "\")";

this._slideImageElement.style.backgroundPosition = forward ? "left" : "right";        
this._slideImageElement.style.left = forward ? "auto" : "0px";
this._slideImageElement.style.right = forward ? "0px" : "auto";

上面的代码非常重要，因为对象是将当前Visible“ div”的“ sdiving in div”放置在用户的左或右，这主要取决于前向变量是true还是false。

var i = 0;

然后开始过渡

setInterval( function() {
    this._currentImageElement.style.backgroundPosition = (forward ? -1 : 1) * (i + 1) + "px";
       this._slideImageElement.style.width = (i + 1) + "px";

请注意，如果我们将bgPosition的前向乘以-1或+1，则前向将确定bgPosition是否会向左移动，因此，例如，如果用户单击NEXT BUTTON，Forward = true，则我们要做的第一件事是

this._slideImageElement.style.backgroundPosition = "left"

然后

this._slideImageElement.style.left = "auto"
this._slideImageElement.style.right = "0px"

这意味着，当滑动图像在其背景位置中移动时，其位置为LEFT，但div放置在RIGHT处为0px； 然后t his._currentImageElement.style.backgroundPosition = -1 * (i + 1) 会将currentImageElement的位置向左移动1px ，

增大slideImage的宽度 ，在这种情况下，该像素在当前div的右侧 ，并且随着当前div向左移动，滑动图像开始从右侧显示 。 （默认情况下，将slideImageElement的宽度设置为0px，这样div存在但对用户不可见）。 这给了它滑动效果，使从右边来的新图像向前移动。

this._slideImageElement.style.width = (i + 1) + "px";

然后声明它为图像宽度时停止。 在这种情况下，它将为500px。 if（（i = i + 2）== 500）{在这种if语句中，重置currentImageElement背景和背景位置“右”或“左”并不重要，只要将其重置即可。

清除时间间隔再次将过渡设置为false，然后为函数changeImage调用setTimeout，该操作将一直持续到幻灯片完成为止。

下面显示了重置代码，因为这对于防止重复相同的图像非常重要（这解决了我的整个问题）

// set the current image to the "new" current image and reset it's background position
this._currentImageElement.style.backgroundImage = "url(\"" + this._imgArray[this._currentImageIndex].src + "\")";
this._currentImageElement.style.backgroundPosition = "right";

// reset the slide image width
this._slideImageElement.style.width = "0px";

// clear the transition interval and mark as not in transition
clearInterval(this._transitionInterval);
                this._inTransition = false;

// setup the next image timer
this._nextImageTimeout = setTimeout(myProject.Utils.createDelegate(this._changeImage, this), 2500);

}

我提供了详尽的详细信息，因为这样可以更轻松地理解问题的逻辑，即使您没有相同的问题，也可以帮助您找出任何问题。

我无法提供JSfiddle，因为我是使用Javascript创建CSS的，因此有不同的方式，但是我想了解前进和后退的逻辑，并有一个不断前进的计时器。

Answer 3

CSS3过渡怎么样？

transition: all 1s ease 0.5s;

JS Fiddle上的简单示例 。

这会处理动画，因此您只需要使用JavaScript设置预期的目的地，即

this.style.left = '100px';

要么

this.style.top = '30px';

CSS3过渡将使元素平滑滑动。

跨浏览器注意！

某些浏览器的transition属性可能需要供应商前缀，我使用的是最新生产的Firefox，而您不需要-moz 。 Opera也一样，不需要'-o'。 Internet Exporer 10不需要前缀。 您可能需要将-webkit用于Safari / Chrome，但请先进行测试。