Jadual Kandungan
实现思路:
Rumah hujung hadapan web tutorial js IE9下Swiper控件不能准确定位到指定页面问题

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

Oct 11, 2017 am 10:16 AM
ie swiper kedudukan

应用场景:

采用轮播控件对表格中的图片文件进行展示,当点击表格中的图片文件时,使用轮播控件(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);
    	}
Salin selepas log masuk

(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();
        		}
Salin selepas log masuk

(3)创建Swiper控件,同时使用Swiper的slideTo(index)方法定位到指定的位置,显示图片。

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

Atas ialah kandungan terperinci IE9下Swiper控件不能准确定位到指定页面问题 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelesaikan masalah yang dihadapi apabila menggunakan swiper dalam vue3 Bagaimana untuk menyelesaikan masalah yang dihadapi apabila menggunakan swiper dalam vue3 May 11, 2023 pm 01:07 PM

1. Pasang swiper. Gunakan npminstallswiper untuk memasang swpier plug-in npminstallswiper-s//@9.2.0// atau pasang versi yang ditentukan npminstallswiper@8.4.7-s 2. Gunakan swiper untuk terus mengikut kaedah rujukan pada laman web rasmi. Projek akan melaporkan ralat: diperkenalkan Komponen menggunakan laluan import{Swiper,SwiperSlide}daripada "swiper/vue/swiper-vue";

Cara menggunakan fungsi peta dan lokasi dalam uniapp Cara menggunakan fungsi peta dan lokasi dalam uniapp Oct 16, 2023 am 08:01 AM

Cara menggunakan fungsi peta dan kedudukan dalam uniapp 1. Pengenalan latar belakang Dengan populariti aplikasi mudah alih dan perkembangan pesat teknologi penentududukan, fungsi peta dan penentududukan telah menjadi bahagian yang amat diperlukan dalam aplikasi mudah alih moden. uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js, yang boleh memudahkan pembangun berkongsi kod pada berbilang platform. Artikel ini akan memperkenalkan cara menggunakan peta dan fungsi kedudukan dalam uniapp dan memberikan contoh kod khusus. 2. Gunakan komponen uniapp-amap untuk melaksanakan fungsi peta

Bagaimana untuk mencari fon telinga wayarles Apple jika ia hilang_Cara untuk mencari fon telinga wayarles Apple Bagaimana untuk mencari fon telinga wayarles Apple jika ia hilang_Cara untuk mencari fon telinga wayarles Apple Mar 23, 2024 am 08:21 AM

1. Mula-mula, kami membuka Apl [Cari] pada telefon mudah alih dan pilih peranti dalam senarai pada antara muka peranti. 2. Kemudian, anda boleh menyemak lokasi dan klik pada laluan untuk menavigasi ke sana.

Cara menggunakan pemalam WordPress untuk mencapai fungsi kedudukan segera Cara menggunakan pemalam WordPress untuk mencapai fungsi kedudukan segera Sep 05, 2023 pm 04:51 PM

Cara menggunakan pemalam WordPress untuk mencapai fungsi lokasi segera Dengan populariti peranti mudah alih, semakin banyak tapak web mula menyediakan perkhidmatan berasaskan geolokasi. Dalam laman web WordPress, kami boleh menggunakan pemalam untuk mencapai fungsi kedudukan segera dan menyediakan pelawat dengan perkhidmatan yang berkaitan dengan lokasi geografi. 1. Pilih pemalam yang betul Terdapat banyak pemalam yang menyediakan perkhidmatan geolokasi dalam pustaka pemalam WordPress untuk dipilih. Bergantung pada keperluan dan keperluan, memilih pemalam yang betul adalah kunci untuk mencapai kefungsian kedudukan segera. Berikut adalah beberapa

Apakah yang perlu saya lakukan jika win11 tidak boleh menggunakan pelayar ie11? (win11 tidak boleh menggunakan pelayar IE) Apakah yang perlu saya lakukan jika win11 tidak boleh menggunakan pelayar ie11? (win11 tidak boleh menggunakan pelayar IE) Feb 10, 2024 am 10:30 AM

Semakin ramai pengguna mula menaik taraf sistem win11 Memandangkan setiap pengguna mempunyai tabiat penggunaan yang berbeza, ramai pengguna masih menggunakan pelayar ie11 Jadi apa yang perlu saya lakukan jika sistem win11 tidak boleh menggunakan pelayar ie. Adakah windows11 masih menyokong ie11? Mari kita lihat penyelesaiannya. Penyelesaian kepada masalah yang win11 tidak boleh menggunakan pelayar ie11 1. Pertama, klik kanan menu mula dan pilih "Command Prompt (Administrator)" untuk membukanya. 2. Selepas dibuka, terus masukkan "Netshwinsockreset" dan tekan Enter untuk mengesahkan. 3. Selepas pengesahan, masukkan "netshadvfirewallreset&rdqu

Internet Explorer membuka Edge: Bagaimana untuk menghentikan pengalihan MS Edge Internet Explorer membuka Edge: Bagaimana untuk menghentikan pengalihan MS Edge Apr 14, 2023 pm 06:13 PM

Bukan rahsia lagi bahawa Internet Explorer telah lama tidak disukai, tetapi dengan ketibaan Windows 11, realiti muncul. Daripada kadangkala menggantikan IE pada masa hadapan, Edge kini menjadi penyemak imbas lalai dalam sistem pengendalian terkini Microsoft. Buat masa ini, anda masih boleh mendayakan Internet Explorer dalam Windows 11. Walau bagaimanapun, IE11 (versi terkini) sudah mempunyai tarikh persaraan rasmi, iaitu 15 Jun 2022, dan jam semakin berdetik. Dengan mengambil kira perkara ini, anda mungkin perasan bahawa Internet Explorer kadangkala membuka Edge, dan anda mungkin tidak menyukainya. Jadi mengapa ini berlaku? wujud

Bagaimana untuk mencari lokasi telefon bimbit pihak lain di Amap - Bagaimana untuk mengesan lokasi telefon bimbit pihak lain di Amap Bagaimana untuk mencari lokasi telefon bimbit pihak lain di Amap - Bagaimana untuk mengesan lokasi telefon bimbit pihak lain di Amap Apr 01, 2024 pm 02:11 PM

1. Klik untuk memasukkan perisian peta Amap pada telefon mudah alih anda. 2. Klik Saya di penjuru kanan sebelah bawah. 3. Klik untuk memasukkan peta keluarga. 4. Klik Cipta Peta Keluarga Saya. 5. Selepas penciptaan berjaya, kod jemputan akan muncul dan boleh dikongsi dengan telefon bimbit lain.

Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go Jul 01, 2023 pm 12:33 PM

Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go: Kebocoran memori adalah salah satu masalah biasa dalam pembangunan program. Dalam pembangunan bahasa Go, disebabkan kewujudan mekanisme pengumpulan sampah automatiknya, masalah kebocoran memori mungkin kurang daripada bahasa lain. Walau bagaimanapun, apabila kita menghadapi aplikasi yang besar dan kompleks, kebocoran memori mungkin masih berlaku. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk mencari dan menyelesaikan masalah kebocoran memori dalam pembangunan bahasa Go. Pertama, kita perlu memahami apa itu kebocoran memori. Ringkasnya, kebocoran memori merujuk kepada

See all articles