ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery コードに基づいて PC および携帯電話のスライドショーをサポート code_jquery

Jquery コードに基づいて PC および携帯電話のスライドショーをサポート code_jquery

WBOY
リリース: 2016-05-16 15:31:36
オリジナル
1345 人が閲覧しました

PC と携帯電話をサポートするスライド ショー コードを共有します。モバイル タッチ、マウスのドラッグ アンド ドロップ切り替え、プログレス バー付きの自動再生モードをサポートします。相互結果の図は次のとおりです:

効果デモ ソースコードダウンロード

HTML コード:

<div class="flex">
    <ul class="slides">
      <li data-title="Slide 1">
        <img alt="" src="img/beasts_feature.jpg">
      </li>
      <li data-title="Slide 2">
        <img alt="" src="img/element-taiwan-thmb.jpg">
      </li>
      <li data-title="Slide 3">
        <img alt="" src="img/streets-newyork.jpg">
      </li>
    </ul>
  </div>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jflex.min.js"></script>
  <script type="text/javascript">
    $('.flex').jFlex({
      autoplay: true
    });
  </script>
ログイン後にコピー
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート