jQuery プラグイン Elastislide は、レスポンシブなフォーカス マップのシームレスなスクロール切り替えを実装します。

レスポンシブな jQuery フォーカス画像のシームレスなスクロール切り替え特殊効果プラグインをサポートします。Elastislide は、左右のカルーセル画像、上下のカルーセル画像、アダプティブ モバイル ディスプレイをサポートし、多数のパラメーターをサポートする非常に美しい画像カルーセル特殊効果プラグインです。設定: 方向: 'horizo​​ntal' (水平切り替え)、速度: 500 (ミリ秒単位の切り替え速度)、イージング: 'ease-in-out' (アニメーション効果)、minItems: 3 (デフォルトの表示数)、など、ブラウザー互換性 : 以前のバージョンのブラウザを気にしない場合は、IE8 以降の最新のブラウザを使用できます。もちろん、モバイルのタッチ スクリーンも使用できます。

レスポンシブな jQuery フォーカス画像のシームレスなスクロール切り替え特殊効果プラグイン Elastislide をサポート

使用法:

1. jQuery とプラグインをロードします

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /> 

2.HTML コンテンツ

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/1.jpg"  class="lazy" alt="jQuery プラグイン Elastislide は、レスポンシブなフォーカス マップのシームレスなスクロール切り替えを実装します。" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/2.jpg"  class="lazy" alt="image02" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/3.jpg"  class="lazy" alt="image03" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/4.jpg"  class="lazy" alt="image04" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/5.jpg"  class="lazy" alt="image05" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/6.jpg"  class="lazy" alt="image06" /></a></li> 
</ul> 

3. 関数呼び出し

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script> 

デモを見る ダウンロード

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。