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

< ;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