Jquery_jquery に基づいたスライドショー効果パッケージをダウンロードします。

改善すべき部分
1. 大きな画像はブラウザの解像度に応じて自動的に拡大縮小され、固定の幅と高さに従って表示され、余分な部分は非表示になります。
2. 大きな画像はすべて直接読み込まれるようになりました。画像が多い場合、エクスペリエンスは良くありません。非同期ロードまたは遅延ロードに変更できます。これは、jquery コントロールの遅延ロードで実現できます。
3. サムネイルはアップロード時に設定されたパラメータに基づいて直接生成されます。縦長の画像の場合は圧縮されます。一部だけを表示し、残りを非表示にするように変更できます。
4. jcarousellite プラグインを使用してサムネイル リストをスライドする場合は、それらを 1 つに統合する必要があります。
5. 現時点では、大きな画像領域とサムネイル領域が比較的独立しているのが利点であり、表示位置を自由に変更できることですが、HTML コードの量が多いことが挙げられます。 $("# ID") だけを必要とする一部のプラグインとは異なります。
JS コード

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

< ;script type="text/javascript">
var currentImage;
var currentIndex = -1;
// 大きい画像を表示します (パラメータのインデックスは 0 からカウントされます)
function showImage(index) {
//現在の画像のページ番号を更新します
$(".CounterCurrent").html(index 1)
//左右のマウスジェスチャーを表示または非表示にします
var len = $(' #OriginalPic img').length;
if (index == len - 1) {
$("#aNext").hide();
else {
$( "#aNext").show();
}
if (index == 0) {
$("#aPrev").hide();
else {
$("#aPrev").show();
}
//大きな画像を表示
if (index varindexImage = $('#OriginalPic p')[index]
//現在の画像を非表示にする
if (currentImage) {
if (currentImage !=indexImage) {
$(currentImage).css('z-index', 2);
$(currentImage).fadeOut(0, function () {
$(this).css({ 'display': 'none ', 'z-index ': 1 })
});
}
}
//ユーザーが選択した画像を表示
$(indexImage).show().css ({ 'opacity': 0.4 } );
$(indexImage).animate({ opacity: 1 }, {duration: 200 });
//変数を更新します
currentImage =
currentIndex =index;
/ /ハイライトを削除して追加します
$('#ThumbPic img').removeClass('active');
$($('#ThumbPic img')[index])。 addClass('active') ;
//左右のマウスジェスチャ領域の高さを設定します
//var tempHeight = $($('#OriginalPic img')[index]).height();
//$( '#aPrev').height(tempHeight);
//$('#aNext').height(tempHeight);
}
}
//次
関数 ShowNext () {
var len = $('#OriginalPic img').length;
var next = currentIndex showImage( next);
}
//前の画像
function ShowPrep() {
var len = $('#OriginalPic img').length;
var next = currentIndex == 0 ? (len - 1 ) : currentIndex - 1;
showImage(next)
}
//次のイベント
$("#aNext").click(function () {
ShowNext () ;
if ($(".active").position().left >= 144 * 5) {
$("#btnNext").click(); >} );
//前のイベント
$("#aPrev").click(function () {
ShowPrep();
if ($(".active").position( ).left $("#btnPrev").click();
}
});
//初期化イベント
$(". OriginalPicBorder").ready(function () {
ShowNext();
//サムネイル クリック イベントをバインド
$('#ThumbPic li').bind('click', function (e) {
var count = $(this).attr('rel');
showImage(parseInt(count) - 1)
});


オンライン デモ:
http://demo.jb51.net/js/2011/Gallery/index.html

パッケージのダウンロード:
/201102 /yuanma /ギャラリー_jb51.rar