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

来源：懂视网责编：小采时间：2020-11-27 20:12:14

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

IE9下Swiper控件不能准确定位到指定页面问题:应用场景：采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（Swiper）显示指定的图片，同时，可以左右翻页，前后浏览所有的图片。实现思路：（1）使用JS创建Swiper的躯干（Swiper相当于灵魂，灵魂必须依附肉体才能起作用）

推荐度：

点击下载本文 文档为doc格式

导读IE9下Swiper控件不能准确定位到指定页面问题:应用场景：采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（Swiper）显示指定的图片，同时，可以左右翻页，前后浏览所有的图片。实现思路：（1）使用JS创建Swiper的躯干（Swiper相当于灵魂，灵魂必须依附肉体才能起作用）

应用场景：

采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（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控件不能准确定位到指定页面问题

推荐度：

点击下载本文 文档为doc格式

标签：无法页面插件

热门焦点

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

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

应用场景：

实现思路：

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

最新推荐

猜你喜欢

热门推荐