Le contrôle Swiper ne peut pas localiser avec précision la page spécifiée sous IE9-js tutoriel-php.cn

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

一个新手

Libérer： 2017-10-11 10:16:31

original

1923 Les gens l'ont consulté

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($(&#39;#__sc1&#39;).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);
    	}

Copier après la connexion

(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();
        		}

Copier après la connexion

(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.

 //$(&#39;.swiper-pagination span&#39;).eq(index).trigger(&#39;click&#39;); });

Copier après la connexion

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!