Home  >  Article  >  Web Front-end  >  Based on Jquery code to support PC and mobile phone slideshow code_jquery

Based on Jquery code to support PC and mobile phone slideshow code_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:361326browse

Share a slide show code that supports PC and mobile phones. It supports mobile touch, mouse drag and drop switching, and automatic playback mode with progress bar. The cross-result diagram is as follows:

Effect demonstration Source code 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>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn