問題の箇所は行番号28と40です。
function()に置き換えると正常に作動します。
アロー関数ではどのように設定すればいいのでしょうか。
よろしくお願い致します。
$(() => { let duration, // スクロールのスピード。(ミリ秒) flagDirection, // スクロールの方向。(左:-1, 右:1) interval, // スクロールのインターバル。(ミリ秒) nextBtn, // 次へ進めるためのボタン。 prevBtn, // 前へ戻るボタン。 timer, // タイマー。 ulSlide; // #slide内のul要素。 duration = 700; flagDirection = -1; interval = 3000; nextBtn = $('#nextBtn'); prevBtn = $('#prevBtn'); ulSlide = $('#slide ul'); /* * 画像を一枚分左右にスライドさせる関数。 * @param : no parameters * @returns : no return values */ function slideTimer() { if (flagDirection === -1) { // ul要素の位置を画像一枚分左へ移動させる。 ulSlide.animate({ 'left' : '-=1000px' }, duration, () => { // 問題の箇所 行番号28 ********** // 最初の画像をul要素内末尾に移動させる。 $(this).append($('#slide li:first-child')); // ul要素の位置を画像一枚分左へ移動させる。 $(this).css('left', -1000); }); } else { // ul要素の位置を画像一枚分右へ移動させる。 ulSlide.animate({ 'left' : '+=1000px' }, duration, () => { // 問題の箇所 行番号40 ********** // 最後の画像をul要素内先頭に移動させる。 $(this).prepend($('#slide li:last-child')); // ul要素の位置を画像一枚分左へ移動させる。 $(this).css('left', -1000); // フラグを左方向へリセット。 flagDirection = -1; }); } } // リストの順番を変更。(3番めを1番目にする) ulSlide.prepend($('#slide li:last-child')); // ul要素の位置を画像一枚分左へ移動させる。 ulSlide.css('left', -1000); // 変数intervalの値ごとにslideTimer()関数を実行。 timer = setInterval(slideTimer, interval); // 前へ戻るボタン。 prevBtn.click(() => { // スクロール方向の切り替え。右。 flagDirection = 1; // タイマーを停止して再スタート。 clearInterval(timer); timer = setInterval(slideTimer, interval); // 初回の関数実行。 slideTimer(); }); // 次へ進めるためのボタン。 nextBtn.click(() => { // スクロール方向の切り替え。左。 flagDirection = -1; // タイマーを停止して再スタート。 clearInterval(timer); timer = setInterval(slideTimer, interval); // 初回の関数実行。 slideTimer(); }); });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/21 09:00