>  기사  >  웹 프론트엔드  >  jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).

jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).

php中世界最好的语言
php中世界最好的语言원래의
2018-04-24 10:16:502394검색

이번에는 회전 슬라이드 캐러셀 효과를 구현하기 위한 jQuery를 소개하겠습니다.(코드 포함) jQuery에서 회전 슬라이드 캐러셀 효과를 구현하기 위한 주의 사항은 무엇입니까? ㅋㅋㅋ lt; 비압축 8kb)

빌트 jQuery통합 이미지 사전 로드

  • Callback 함수
  • ——onConstruct onStart, onEnd
  • 다양한 구성 옵션
  • 이미지 지연 로딩
  • 자동 회전
  • 쉬움 확장
  • jquery 예: anoSlide 사용 방법

    핵심 파일 소개

    <script src="js/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.anoslide.js"></script>
  • 프로젝트에 따라 완전히 맞춤설정할 수 있는 기본 CSS 스타일 작성
  • .carousel {
      position: relative;
      min-height: 20px;
      height: auto !important;
      height: 20px;
      background: url(images/loader.gif) center center no-repeat;
    }
    .carousel .next, .carousel .prev {
      display: none;
      width: 56px;
      height: 56px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-top: -28px;
      z-index: 9999;
      cursor: pointer;
    }
    .carousel .prev {
      margin-left: -60px;
      background: url(images/prev.png) 0 0 no-repeat;
    }
    .carousel .next {
      margin-right: -60px;
      background: url(images/next.png) 0 0 no-repeat;
    }
    .carousel li {
      display: none;
    }
    .carousel li img {
      width: 100%;
      height: auto;
    }
    .paging {
      position: absolute;
      z-index: 9998;
    }
    .paging > a {
      display: block;
      cursor: pointer;
      width: 40px;
      height: 40px;
      float: left;
      background: url(images/dots.png) 0px -40px no-repeat;
    }
    .paging > a:hover, .paging > a.current {
      background: url(images/dots.png) 0px 0px no-repeat;
    }
    .badge {
      display: block;
      width: 104px;
      height: 104px;
      background: url(images/badge.png) 0 0 no-repeat;
      z-index: 9000;
      position: absolute;
      top: -3px;
      left: -3px;
    }
    img {
      -webkit-user-select: none; /* Chrome all / Safari all */
      -moz-user-select: none;   /* Firefox all */
      -ms-user-select: none;   /* IE 10+ */
      -o-user-select: none;
      user-select: none;
    }

  • jquery 캐러셀 anoSlide 혼합 디스플레이
  • JS
$('.carousel ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev',
  next: 'a.next',
  lazy: true,
  auto: 4000
})
html
<p class="carousel">
  <a class="prev"></a>
  <ul>
    <li>Content goes here</li>
    <li>Content goes here</li>
    <li>Content goes here</li>
  </ul>
  <a class="next"></a>
</p>
  • jquery 슬라이드쇼 anoSlide 다중 이미지
  • JS

    $('.carousel[data-mixed] ul').anoSlide(
    {
      items: 5,
      speed: 500,
      prev: 'a.prev[data-prev]',
      next: 'a.next[data-next]',
      lazy: true,
      delay: 100})

    HTML

    <p class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>
     <ul>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>
       </p>
      </li>
      <li>
       <p class="wrap">
        <figure><img src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>
       </p>
      </li>
     </ul>
     <a class="next" data-next=""></a> </p>

    j 쿼리 캐러셀 anoSlide 페이지 매김

    js

    $('.carousel ul').anoSlide(
    {
      items: 1,
      speed: 500,
      prev: 'a.prev[data-prev-paging]',
      next: 'a.next[data-next-paging]',
      lazy: true,
      onConstruct: function(instance)
      {
        var paging = $('<p/>').addClass('paging fix').css(
        {
          position: 'absolute',
          top: 1,
          left:50 + '%',
          width: instance.slides.length * 40,
          marginLeft: -(instance.slides.length * 40)/2
        })
         
        /* Build paging */
        for (i = 0, l = instance.slides.length; i < l; i++)
        {
          var a = $(&#39;<a/>').data('index', i).appendTo(paging).on(
          {
            click: function()
            {
              instance.stop().go($(this).data('index'));
            }
          });
           
          if (i == instance.current)
          {
            a.addClass('current');
          }
        }
     
        instance.element.parent().append(paging);
      },
      onStart: function(ui)
      {
        var paging = $('.paging');
         
        paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
      }
    })

    html

    <p class="carousel">
      <a class="prev"></a>
      <ul>
        <li>Content goes here</li>
        <li>Content goes here</li>
        <li>Content goes here</li>
      </ul>
      <a class="next"></a>
    </p>
    ㅋㅋㅋ PHP 중국어 웹사이트! 추천 자료:

    jQuery+PHP를 사용하여 테이블 편집 및 저장 방법 구현

    jquery를 사용하여 테이블의 로컬 정렬을 구현하는 단계에 대한 자세한 설명(코드 포함)

    위 내용은 jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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