搜尋
首頁web前端js教程IE9下Swiper控制項不能準確定位到指定頁面問題

應用場景:

採用輪播控制項對表格中的圖片檔案進行展示,當點擊表格中的圖片檔案時,使用輪播控制項(Swiper)顯示指定的圖片,同時,可以左右翻頁,前後瀏覽所有的圖片。

實現想法:

(1)使用JS創造Swiper的軀幹(Swiper相當於靈魂,靈魂必須依附肉體才能運作)。

    	__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)遍歷表格中的圖片文件,並塞入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="/static/imghwm/default1.png"  data-src="&#39; + picParam + &#39;"  class="lazy"  / alt="IE9下Swiper控制項不能準確定位到指定頁面問題" >&#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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
vue3中使用swiper遇到的问题怎么解决vue3中使用swiper遇到的问题怎么解决May 11, 2023 pm 01:07 PM

一、安装swiper使用npminstallswiper安装swpier插件npminstallswiper-s//@9.2.0//或者安装指定版本npminstallswiper@8.4.7-s二、使用swiper直接按照官网的引用方法,项目会报错解决方法:引入的组件使用以下路径import{Swiper,SwiperSlide}from"swiper/vue/swiper-vue";import"swiper/swiper.min.css";有时还需要

如何在uniapp中使用地图和定位功能如何在uniapp中使用地图和定位功能Oct 16, 2023 am 08:01 AM

如何在uniapp中使用地图和定位功能一、背景介绍随着移动应用的普及和定位技术的迅猛发展,地图和定位功能已经成为了现代移动应用中不可缺少的一部分。uniapp是一种基于Vue.js开发的跨平台应用开发框架,可以方便开发者在多个平台上共用代码。本文将介绍如何在uniapp中使用地图和定位功能,并提供具体的代码示例。二、使用uniapp-amap组件实现地图功能

如何使用WordPress插件实现即时定位功能如何使用WordPress插件实现即时定位功能Sep 05, 2023 pm 04:51 PM

如何使用WordPress插件实现即时定位功能随着移动设备的普及,越来越多的网站开始提供基于地理位置的服务。在WordPress网站中,我们可以通过使用插件来实现即时定位功能,为访问者提供与地理位置相关的服务。一、选择适合的插件在WordPress插件库中有很多提供地理位置服务的插件可供选择。根据需求和要求,选择适合的插件是实现即时定位功能的关键。以下是几个

Internet Explorer 打开 Edge:如何停止 MS Edge 重定向Internet Explorer 打开 Edge:如何停止 MS Edge 重定向Apr 14, 2023 pm 06:13 PM

长期以来,InternetExplorer的失宠一直不是秘密,但随着Windows11的到来,现实开始了。Edge将来不再有时取代IE,它现在是微软最新操作系统中的默认浏览器。目前,您仍然可以在Windows11中启用InternetExplorer。但是,IE11(最新版本)已经有了一个正式的退役日期,即2022年6月15日,时间在流逝。考虑到这一点,您可能已经注意到InternetExplorer有时会打开Edge,而您可能不喜欢它。那么为什么会这样呢?在

win11无法使用ie11浏览器怎么办?(win11用不了ie浏览器)win11无法使用ie11浏览器怎么办?(win11用不了ie浏览器)Feb 10, 2024 am 10:30 AM

越来越多的用户开始升级win11系统,由于每个用户的使用习惯不同,还是有不少用户在使用ie11浏览器,那么win11系统用不了ie浏览器,该怎么办呢?windows11还支持ie11吗?下面就来看看解决办法。win11无法使用ie11浏览器的解决方法1、首先右键开始菜单,选择“命令提示符(管理员)”打开。2、打开之后,直接输入“Netshwinsockreset”,回车确定。3、确定之后再输入“netshadvfirewallreset&rdqu

解决Go语言开发中的内存泄漏定位问题的方法解决Go语言开发中的内存泄漏定位问题的方法Jul 01, 2023 pm 12:33 PM

解决Go语言开发中的内存泄漏定位问题的方法内存泄漏是程序开发中常见的问题之一。在Go语言开发中,由于其自动垃圾回收机制的存在,内存泄漏问题相对其他语言来说可能较少。然而,当我们面对大型复杂的应用程序时,仍然可能会出现内存泄漏的情况。本文将介绍一些在Go语言开发中定位和解决内存泄漏问题的常用方法。首先,我们需要了解什么是内存泄漏。简单来说,内存泄漏指的是程序中

Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Mar 20, 2024 pm 09:21 PM

近期不少的win10用户们在使用电脑浏览器的时候发现自己的ie浏览器总是自动的跳转到edge浏览器,那么win10打开ie自动跳转edge怎么关闭?。下面就让本站来为用户们来仔细的介绍一下win10打开ie自动跳转edge关闭方法吧。1、我们登录edge浏览器,点击右上角...,找下拉的设置选项。2、我们进入设置后,在左侧栏点击默认浏览器。3、最后我们在兼容性中,勾选不允许IE模式下重新加载网站,重启ie浏览器即可。

ie快捷方式无法删除如何解决ie快捷方式无法删除如何解决Jan 29, 2024 pm 04:48 PM

ie快捷方式无法删除的解决办法:​1、权限问题;2、快捷方式损坏;3、软件冲突;4、注册表问题;5、恶意软件;6、系统问题;7、重新安装IE;8、使用第三方工具;9、检查快捷方式的目标路径;10、考虑其他因素;11、咨询专业人士。详细介绍:​1、权限问题,右键点击快捷方式,选择“属性”,在“安全”选项卡中,确保有足够的权限删除该快捷方式,如果没有,可以尝试以管理员身份运行等等。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境