使用純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，但請先進行測試。