jQuery プラグイン slick はレスポンシブなモバイル スライドショー画像切り替えを実装します Effects_jquery

jQuery に基づいた、jQuery 対応のモバイル スライドショー画像切り替え特殊効果プラグイン slick は非常に強力で、左右のボタン切り替え、ドット切り替え、カスタム切り替え番号、カスタム切り替え速度、画像プリセットをサポートしています読み込みと自動再生のサポート定義、効果は非常に優れており、多くのパラメーターのカスタマイズがサポートされています。可能だと思われる場合は、そのパラメーター構成を参照できます。それでも学習して使用する価値があります。

使用法:

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

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.js"></script> 
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 

2.HTML コンテンツ

<div class="slider fade"> 
<div><div class="image"><img src="img/fonz1.png"/></div></div> 
<div><div class="image"><img src="img/fonz2.png"/></div></div> 
<div><div class="image"><img src="img/fonz3.png"/></div></div> 
</div> 

3. 関数呼び出し

<script type="text/javascript"> 
$(document).ready(function() { 
  $('.fade').slick({ 
    dots: true, 
    infinite: true, 
    speed: 500, 
    fade: true, 
    slide: 'div', 
    cssEase: 'linear' 
  }); 
}); 
</script> 

デモを見る 今すぐダウンロード

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