>  기사  >  웹 프론트엔드  >  Swiper 컨트롤이 IE9에서 지정된 페이지를 정확하게 찾을 수 없습니다.

Swiper 컨트롤이 IE9에서 지정된 페이지를 정확하게 찾을 수 없습니다.

一个新手
一个新手원래의
2017-10-11 10:16:311827검색

적용 시나리오:

테이블에 이미지 파일을 표시하려면 캐러셀 컨트롤을 사용하세요. 테이블에 있는 이미지 파일을 클릭하면 동시에 지정된 이미지를 표시할 수 있습니다. 페이지를 왼쪽과 오른쪽으로 넘기고 모든 사진을 앞뒤로 탐색합니다.

구현 아이디어:

(1) JS를 사용하여 Swiper의 몸통을 만듭니다(Swiper는 영혼과 동일하며 영혼이 몸에 붙어 있어야 기능합니다).

    	__createPreviewHtml: function(){
    		if($('#__sc1').length>0) return;
    		var html = 
    		&#39;<p id="__sc1" class="swiper-container" style="z-index:9999;">&#39; 
    		+ &#39;	<a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>&#39;
    		+ &#39;	<p class="swiper-wrapper">   &#39;
    		+ &#39;</p> &#39;
    		+ &#39;<p class="swiper-pagination"></p>&#39;
    		+ &#39;<p class="swiper-button-prev"></p>&#39;
    		+ &#39;<p class="swiper-button-next"></p>&#39;    	    
    		+ &#39;</p>&#39;;
    		$(document.body).append(html);
    		$(&#39;#__sc_closeBtn&#39;).on(&#39;click&#39;,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 = &#39;<img src="&#39; + picParam + &#39;"/>&#39;;
               	 	 	var $slide = $(&#39;<p class="swiper-slide">&#39; + imgHtml + &#39;</p>&#39;);
               	 	 	$(&#39;.swiper-wrapper&#39;).append($slide);
               	 	 	i++;
    	            }
        		}); 
        		
        		if(typeof(mySwiper) != &#39;undefined&#39;){
        			mySwiper.removeAllSlides();
        		}

(3) Swiper 컨트롤을 생성하고 Swiper의 SlideTo(index) 메서드를 사용하여 지정된 위치를 찾아 이미지를 표시합니다.

아아아아

위 내용은 Swiper 컨트롤이 IE9에서 지정된 페이지를 정확하게 찾을 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.