Heim  >  Artikel  >  Web-Frontend  >  Basierend auf Jquery-Code zur Unterstützung von PC- und Mobiltelefon-Diashows code_jquery

Basierend auf Jquery-Code zur Unterstützung von PC- und Mobiltelefon-Diashows code_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:361327Durchsuche

Teilen Sie einen Diashow-Code, der PC und Mobiltelefone unterstützt. Er unterstützt mobile Berührung, Maus-Drag-and-Drop-Umschaltung und automatischen Wiedergabemodus mit Fortschrittsbalken. Das Kreuzergebnisdiagramm sieht wie folgt aus:

Effektdemonstration Quellcode-Download

HTML-Code:

<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>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn