欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-23 12:46:34
...

应用场景:

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

实现思路:

(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的躯干,获取点击图片文件的索引号(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 = '<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-pagination span').eq(index).trigger('click'); });

以上就是IE9下Swiper控件不能准确定位到指定页面问题 的详细内容,更多请关注其它相关文章!

相关标签: Swiper ie 定位