Le contrôle Swiper ne peut pas localiser avec précision la page spécifiée sous IE9

Scénario d'application :

Utilisez le contrôle carrousel pour afficher les fichiers image dans le tableau. Lorsque vous cliquez sur le fichier image dans le tableau, utilisez le contrôle carrousel (Swiper) pour afficher l'image spécifiée. , et en même temps, vous pouvez tourner les pages à gauche et à droite et parcourir toutes les images en avant et en arrière.

Idées d'implémentation :

(1) Utilisez JS pour créer le torse de Swiper (Swiper est équivalent à l'âme, et l'âme doit être attachée au corps pour fonctionner).

    	__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) Parcourez les fichiers image dans le tableau et insérez-les dans le torse de Swiper pour obtenir le numéro d'index (index) et l'URL du fichier image cliqué (identifié de manière unique par l'ID du fichier).

        		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) Créez un contrôle Swiper et utilisez la méthode slideTo(index) de Swiper pour localiser la position spécifiée et afficher l'image.

 //$('.swiper-pagination span').eq(index).trigger('click'); });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!