IE9下Swiper控件不能准确定位到指定页面问题

一个新手

发布： 2017-10-11 10:16:31

原创

1921 人浏览过

应用场景：

采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（Swiper）显示指定的图片，同时，可以左右翻页，前后浏览所有的图片。

实现思路：

（1）使用JS创建Swiper的躯干（Swiper相当于灵魂，灵魂必须依附肉体才能起作用）。

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

登录后复制

（2）遍历表格中的图片文件，并塞入Swiper的躯干，获取点击图片文件的索引号（index），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)方法定位到指定的位置，显示图片。

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

登录后复制

以上是IE9下Swiper控件不能准确定位到指定页面问题的详细内容。更多信息请关注PHP中文网其他相关文章！