製品には一般的なスライダー機能が実装されています。URL からアイテム インデックス値を読み取り、スライダーをスクロールしてアクティブなアイテムを表示する必要があります。
次のコード ロジックは、アクティブなサムネイルを表示するために使用されます。そのためには、DIV を負の左にアニメーション化する必要があります。
まず、サムネイル アイテムの合計を取得し、次に URL ハッシュ値 (つまり #slide=7) からアクティブなアイテムのインデックスを取得します。1 セットには最低 5 アイテムが含まれます。ActiveItemIndex があるページ セットの値にスライダーの幅を掛ける必要があります。
Javascript コード -
showActiveThumbnailOnPageLoad : function() {
var _this = this,
totalThumbnails = $('.slidetabs a').length,
activeItem = window.location.href.split('=')[1],
scrollAmount;
if(activeItem > 5 && activeItem <= 10) {
scrollAmount = '-=' + 772
} else if(activeItem > 10 && activeItem <= 15) {
scrollAmount = '-=' + 772 * 2
} else if(activeItem > 15 && activeItem <= 20) {
scrollAmount = '-=' + 772 * 3
}
$('.slidetabs').stop().animate({
left : scrollAmount
});
}
現在、最大 20 個のアイテムをサポートするハードコード条件が使用されています。n個のアイテムをサポートするようにこのコードを作成するのに役立ちます。ハードコード値のない汎用コードを意味します。
前もって感謝します。