테이블에 이미지 파일을 표시하려면 캐러셀 컨트롤을 사용하세요. 테이블에 있는 이미지 파일을 클릭하면 동시에 지정된 이미지를 표시할 수 있습니다. 페이지를 왼쪽과 오른쪽으로 넘기고 모든 사진을 앞뒤로 탐색합니다.
(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) 메서드를 사용하여 지정된 위치를 찾아 이미지를 표시합니다.
아아아아위 내용은 Swiper 컨트롤이 IE9에서 지정된 페이지를 정확하게 찾을 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!