>  기사  >  웹 프론트엔드  >  PC 및 휴대폰 슬라이드쇼를 지원하는 Jquery 코드 기반 code_jquery

PC 및 휴대폰 슬라이드쇼를 지원하는 Jquery 코드 기반 code_jquery

WBOY
WBOY원래의
2016-05-16 15:31:361327검색

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>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.