JQUERY を推奨しないでください - 私は学習目的でこの演習を行っています。
10 秒の設定間隔を使用して、タイマーで画像 (_elementSlideChange) を回転させる JavaScript を実装しました。また、これにスライド機能を追加しました。これは 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 はお勧めしません。
そして、事前に助けてくれてありがとう。
クッシュ