カルーセルコントロールを使用してテーブル内の画像ファイルをクリックすると、カルーセルコントロール(スワイパー)を使用して指定した画像を表示することができます。ページを左右にめくって、すべての写真を前後に閲覧します。
(1) JSを使用してSwiperの胴体を作成します(Swiperは魂に相当し、魂は体に取り付けられて機能する必要があります)。
__createPreviewHtml: function(){ if($('#__sc1').length>0) return; var html = '<p id="__sc1" class="swiper-container" style="z-index:9999;">' + ' <a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>' + ' <p class="swiper-wrapper"> ' + '</p> ' + '<p class="swiper-pagination"></p>' + '<p class="swiper-button-prev"></p>' + '<p class="swiper-button-next"></p>' + '</p>'; $(document.body).append(html); $('#__sc_closeBtn').on('click',this.__hidePreviewBox); }
(2) テーブル内の画像ファイルを走査し、Swiper の胴体に押し込み、クリックされた画像ファイルのインデックス番号 (インデックス) と URL (ファイル ID で一意に識別される) を取得します。
var index = 0; var i = 0; me._grid.findRow(function(row){ var fileId2 = row.fileId; var fileName2 = row.fileName.toLowerCase(); if(fileName2 && imgReg.test(fileName2)==true){ if(fileId == fileId2){ index = i; } var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2); var imgHtml = '<img src="' + picParam + '"/>'; var $slide = $('<p class="swiper-slide">' + imgHtml + '</p>'); $('.swiper-wrapper').append($slide); i++; } }); if(typeof(mySwiper) != 'undefined'){ mySwiper.removeAllSlides(); }
(3) Swiper コントロールを作成し、Swiper の slideTo(index) メソッドを使用して指定した位置を見つけて画像を表示します。
りー以上がスワイパー コントロールは、IE9 では指定されたページを正確に見つけることができませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。