左右スクロールと自動スクロールを制御できるjQueryベースのコードeffect_jquery

左右のスクロールと自動スクロールの制御の例を共有します。昨晩、蚊に刺され、汗の侵入に耐えながら、苦労して作成したコードを 1 行ずつ入力しました。 2 種類のモードをカプセル化します:
クリック スクロール バージョン DEMO 自動スクロール バージョン DEMO、ソース コード内の詳細なコメント付き アイデア:
クリック スクロール モードでは、クリック (前方/方向 (後/番号) をクリックイベントを追加し、表示ブロックの左の値を制御して切り替えます。
1. 前方 (左): 最初のページにいるとき、最後のページまでスクロールします。それ以外の場合は、左の値を累積して前方にスクロールします。
2. 後方 (右): 最後のページにいる場合は、最初のページにスクロールします。それ以外の場合は、左の値を減らして後方にスクロールします。デジタル クリック: インデックス (…) を使用して、数値リスト内の現在のクリックのインデックス値を取得します。そのインデックス値は、ペリフェラル幅の負の値の倍数になります。
コア コード:

コードをコピーします コードは次のとおりです:

//@Mr.Think***前方にスクロール

$pre.click(function(){
if (!$showbox.is(':animated')) { //表示領域がアニメーション化されているかどうかを決定します
if ($cur == 1) { //最初のページで、最後のページまで前方にスクロールします Layout
$showbox.animate({
left: '-=' $w * ($pages - 1)
}, 500 ); //左の値を変更し、表示レイアウトを切り替えます。500(ms)はスクロール時間です。以下も同様です。
$cur = $pages; //レイアウトを最後のレイアウトに初期化します
}
else; {
$showbox.animate({
left: ' =' $ w
}, 500); // 左の値を変更して表示レイアウトを切り替えます
$cur--;レイアウトは縮小されます
}
$num.eq($cur - 1).addClass ('numcur').siblings().removeClass('numcur'); // 対応するレイアウト番号に強調表示スタイルを追加します、同じレベル要素の強調表示スタイルを削除します
}
})
//@Mr.Think***後方にスクロール
$next.click(function(){
if (!$showbox.is(':animated')) { //表示領域をアニメーション化するかどうかを判断
if ($cur == $pages) { //最後のページにいる場合、最初のページまで逆スクロールしますpage
$showbox.animate({
left: 0
}, 500); //左の値を変更し、表示レイアウトを切り替えます。500 (ms) はスクロール時間です。以下も同様です。 >$cur = 1; //レイアウトを最初のレイアウトに初期化します
}
else {
$showbox.animate({
left: '-=' $w
}, 500 );//左の値を変更して表示レイアウトを切り替えます
$cur; //レイアウト数が蓄積されます
}
$num.eq($cur - 1).addClass('numcur' ).siblings().removeClass('numcur'); //対応するレイアウト番号にハイライト スタイルを追加して移動します。ただし、兄弟要素のハイライト スタイルは除きます。
}
//@ Mr.Think***Number click event
$num.click(function(){
if ( !$showbox.is(':animated')) { //表示領域がアニメーション化されているかどうかを判断します
var $index = $num.index(this); //リスト内の現在のクリック位置の値をインデックスします
$showbox.animate({
left: '-' ($w * $index)
}, 500); // 左の値を変更し、表示レイアウトを切り替えます。500 (ms) はスクロール時間です。
$ cur = $index 1; // この文はクリックを回避できます。 3 ページ目までスクロールして空白のページを表示するときに戻るボタンを押すと、index() の値が 0 から始まるので、1
$(this).addClass('numcur').siblings().removeClass(' を追加します。 numcur'); // 現在のクリックに強調表示スタイルを追加し、同じレベルの要素の強調表示スタイルを削除します
}
});


に基づいて自動スクロール モードが強化されます。クリックスクロールモードでは、マウスがストロークされたときに自動スクロールイベントを追加し、アニメーションイベントをクリアするだけです。
デモのデモでは、前方/後方/番号のアニメーションイベントをクリアすることに注意してください。ただし、ページがある場合、追加する必要があるこれらのクリア アニメーション イベントはすべて同じ領域内にあり、自動スクロールをシミュレートすることができます。もう 1 つのポイントは、自動スクロールが setInterval(“fun”,interval) ではなく setTimeout(“fun”,interval) で実装されていることです。その理由は、setInterval は渡された関数を間隔の後に繰り返し実行するのに対し、setTimeout は渡された関数のみを実行するためです。これにより、マウスがアニメーション停止領域に 2 回目に移動したときにアニメーションがクリアされなくなります。

コードをコピー


コードは次のとおりです:

.... / /@Mr.Think***自動スクロールを呼び出しますautoSlide(); .... //@Mr.Think***スクロールを停止します

clearFun($pre); ($next);

clearFun($num);
//@Mr.Think***
function clearFun(elem){
elem.hover でイベントが描画されるときに自動スクロールを停止します(function(){
clearAuto();
}, function(){
autoSlide();
});
}
//@Mr.Think***自動スクロール
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 3000);//ここでは setInterval を繰り返し実行することはできません。受信関数。2 番目のストロークが行われたときに停止が失敗します。
}
//@Mr.Think*** 自動スクロールをクリアします。
function clearAuto() {
clearTimeout($ autoFun);
}


さらに詳細なコード分析については、詳細なコメント付きのソース コードを参照してください。
コード パッケージのダウンロード。