今までこのスクリプトで私を助けてくれた人に素早く感謝してくれました.Javascriptとjqueryのよりエレガントな面を学ぶのに大いに役立っています。
私はこのスクリプトに最後の問題が1つあります。setinterval()を使用して画像チェンジャーを循環させていますが、JS/Jquerycodeは次のようになります。
$(function() {
var rotateTimer = setInterval(rotateImg,15000);
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
}
});
function switchToImg(image) {
var $featureImage = $('#feature-image');
$featureImage.fadeOut(200, function() {
$featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
$('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
});
$('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};
function rotateImg() {
var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));
if (!$('#feature-links a').hasClass(next))
next = 'a1';
switchToImg(next);
}
});
This script works on class names of tags that allow a user to manually switch to an image. As well as this,
rotateImg()
is providing an automated image/text cycle every 15 seconds with the help of setInterval()
.
私が持っている問題は、ユーザーがリンクを手動でクリックすると、 setInterval()
を再初期化することです。
In the .click
function I clear the interval timer and then make a call to the switchToImg()
function with the class name of the tag that was clicked on passed as a variable.
私は、サイクルの終わりに向かってリンクをクリックしてすぐに次の画像に切り替えることを避けるために、タイマーをどのように再設定できるかを試しています。
私は自分のコールバック関数を switchToImg()
に構築して、関数が完了したらタイマをリセットして、理想的には最初は長時間(例えば30秒)その後、15秒のクロックに戻って落ち着きます。私の研究は、私が頭や尾を作るのが難しいさまざまなリポジトリのロードにつながっています。
スクリプトにこの機能をどのように組み込むことができるかについてのガイダンスは本当に手に入るだろう。御時間ありがとうございます。 :)
私はあなたが求めていることに従うことを100%確信しているわけではありませんが、あなたがやろうとしているのは、ユーザーがクリックした後にインターバルタイマーを再起動することです。
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
setTimeout(function() {
rotateTimer = setInterval(rotateImg, 15*1000);
}, 15*1000);
}
});
間隔のタイマーを15秒後に再起動するには、ワンショット setTimeout()
呼び出しを使用します。これは、15 + 15 = 30秒後に次の画像がクリックされた後に切り替わり、その後は毎回15秒間表示されます。