ホームページ > ウェブフロントエンド > jsチュートリアル > スワイパー コントロールは、IE9 では指定されたページを正確に見つけることができません

スワイパー コントロールは、IE9 では指定されたページを正確に見つけることができません

一个新手
リリース: 2017-10-11 10:16:31
オリジナル
1920 人が閲覧しました

アプリケーションシナリオ:

カルーセルコントロールを使用してテーブル内の画像ファイルをクリックすると、カルーセルコントロール(スワイパー)を使用して指定した画像を表示することができます。ページを左右にめくって、すべての写真を前後に閲覧します。

実装アイデア:

(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 の胴体に押し込み、クリックされた画像ファイルのインデックス番号 (インデックス) と 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) メソッドを使用して指定した位置を見つけて画像を表示します。

りー

以上がスワイパー コントロールは、IE9 では指定されたページを正確に見つけることができませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート