レスポンシブな jQuery フォーカス画像のシームレスなスクロール切り替え特殊効果プラグインをサポートします。Elastislide は、左右のカルーセル画像、上下のカルーセル画像、アダプティブ モバイル ディスプレイをサポートし、多数のパラメーターをサポートする非常に美しい画像カルーセル特殊効果プラグインです。設定: 方向: 'horizontal' (水平切り替え)、速度: 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="images/small/1.jpg" alt="jQuery プラグイン Elastislide は、レスポンシブなフォーカス マップのシームレスなスクロール切り替えを実装します。" /></a></li> <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> </ul>
3. 関数呼び出し
<script type="text/javascript"> $(document).ready(function() { $( '#carousel' ).elastislide(); }); </script>
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。