jQueryスライドショープラグイン(サムネイル機能付き)_jquery

友人の招待で、私は彼の会社のスライド ショー エフェクトの作成を手伝いました。そのエフェクトは次のとおりです。

サムネイルの中央は現在再生されている画像で、両側が分岐しています。 、徐々に縮小し、透明度が低下します。現在0枚目の写真が再生されているとすると、 0

1 4

2 写真投稿後の配置は以下のようになります。

4

0 3

１ 2

これは単なる再生効果です。サムネイルを回転すると、対応する大き​​な画像が右からスクロールします。大きな画像が入る速度はサムネイルの回転に対応する必要があります。全体的な効果は次のとおりです。


サムネイルの回転と大きな画像のスクロールを組み合わせることを検討しています。サムネイルの回転は 2 つの部分に分かれており、別の jQuery プラグインとして使用され、プラグイン内のイベントによって大きな画像がスクロールされます。まず、サムネイル回転プラグインの実装について説明します。
1. プラグイン パラメーター:



コードをコピーします

コードは次のとおりです: this.defaults = { auto: false, //自動再生するかどうか

width: 85, //サムネイルの幅

height: 42, //サムネイルの高さを縮小します
onstart: null, //スクロール開始
onchange: null //スクロール イベント
}; -in events:
onstart イベント、回転が開始されるたびに 1 回トリガーされます。転送されるパラメーターは次のとおりです: 現在のサムネイルの jQuery オブジェクトと次のサムネイルの jQuery オブジェクト:

コードをコピーします


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

opt.onstart && opt.onstart(me.Images.img[curIdx].img$, me.Images.img[idx].img$); onchange イベント (距離がスクロールされるたびにトリガーされます)、および現在のスクロールの割合の進行状況パラメーター:

コードをコピーします

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

opt.onchange && opt.onchange(stepPercent[step]); stepPercent[step] 配列について言えば、次のようになります: サムネイルの回転は、時間指定された可変速度の方法を採用します。つまり、1 枚の画像か2 つの画像を回転させると、時間は固定されますが、2 つの画像を回転させる速度は画像を回転するよりも速く、画像の数やスクロール距離に関係なく回転します。スクロールするのにそれほど時間はかかりません。

StepPercent[step] この配列は、各回転に 15 ステップが必要であり、各回転の距離が徐々に減少するため、可変速度効果が得られます。

コードをコピー


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

var stepPercent = new Array(15) //固定 15 ステップを実行します。 、各ステップはパーセンテージを表す数値シーケンスに到達します。 経過時間が一定で速度が固定されていないことを示します stepPercent[0] = 0.2; //20% を開始 stepPercent[1] = 0.2 0.2 * 0.81; //2 番目のステップ var i = 2, total = stepPercent[1]; i stepPercent[i] = total (total - stepPercent[i - 2]) * 0.81;

合計 = stepPercent[i];

if (i == stepPercent.length - 1)
stepPercent[i] = 1;


最初のステップは 20%、その後の各ステップは前のステップの 81%、つまり 19% ずつ速度が低下します。ただし、15 ステップ目までに小数点の計算に誤差が生じます。これは 1 に非常に近いかもしれません。しかし、これは 1 の値ではないので、ステップ 15 を直接 1、つまり 100% に設定すると、スクロールが終了します。
(注: このシーケンスはどのように設計されましたか? Excel を使用してセルを見つけて 0.2 と入力しました。次のセルの数式は前のセルの 0.81 です。次に、もう少し下にドラッグして、上記の累積を入力します。 1 に近い値が必要なステップ数です。)
このシーケンスが JS を使用して生成されていない場合、後で速度を変更したい場合は、実際には Excel で作成したシーケンスから直接配列を定義できます。 、同じことを一度だけ行います。

回転する際、サムネイルのサイズ、透明度、位置などの情報は、この stepPercent 配列で設定された倍率を使用して計算されます。
プラグインの詳細については説明しません。サムネイルに従って全体像をスクロールする方法について説明します。
3. 大きな画像のスクロール
大きな画像がサムネイルとともにスクロールする場合、どの画像にスクロールしても、スキップしすぎを防ぐために、現在の大きな画像のすぐ後ろにスクロールする効果が表示されます。複数の写真を撮影すると、速度が速すぎてまぶしく感じるため、ここで onstart イベントが役に立ちます。
onstart イベントでは、まず現在の画像を大きな画像リストの最初の場所に移動し、次にターゲットの画像を現在の画像の後ろに移動します (注: 現在の画像は、大きい画像リストの最初の場所に移動します)。現在の画像を大きな画像リストの先頭に移動できるため、現在の画像を後ろに移動すると、スクロール バーの位置が移動します。 。
次に、onchange イベントで、受信した進行状況パラメーターに従って水平スクロール バーのスクロール距離を設定するだけです。大きな画像のスクロールは非常に簡単です。具体的な JS は次のとおりです。

コードをコピー コードは次のとおりです。

$( function() {
$("#div_Slide").Slide({
auto: true,
width: 85,
height: 42,
onstart: function(curImg, nextImg) {
var cData = curImg.attr("データ");
var nData = nextImg.attr("データ");
var bigCur = $("#" cData), bigNext = $(" #" nData);
var allBigImg = bigCur.parent().children("img");
var curIndex = allBigImg.index(bigCur[0]);
var nextIndex = allBigImg.index( bigNext[0]);
var firstImg = $(allBigImg[0]);
if (firstImg.attr("id") != bigCur.attr("id"))
bigCur.insertBefore (firstImg);
$("#div_BigImg").scrollLeft(0);
bigNext.insertAfter(bigCur);
onchange: function(percent) {
$( "#div_BigImg");
}
});
var bigDivPos = bigDiv.position(); 🎜>bigDiv.scrollLeft( 0); //スクロール バーが先頭にない場合、F5 キーを押して更新しても先頭にジャンプしないことがわかったので、最初にスクロール バーを先頭にスクロールします。 #div_Slide").css({
"top": (bigDivPos.top bigDiv.height() - $("#div_Slide").height()) "px",
"left": bigDivPos.左 "px"
}) ;
});


ソース コードのダウンロード:
http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar

使用中に何か発見がありました。ご質問や改善点がある場合は、メッセージを残してください。ありがとうございます。