jQuery は回転スライド カルーセル効果を実装します (コード付き)

今回は、回転スライド カルーセル効果を実装するための jQuery (コード付き) を紹介します。jQuery で回転スライド カルーセル効果を実装するための 注意事項 について、実際のケースを見てみましょう。

特徴

• レスポンシブ - あらゆるビューポート幅に適応

• 混合コンテンツ

• CSSは必要ありません

• 軽量 (& lt; 8 kb 非圧縮)

• jQuery で

• 統合された画像のプリロード

• コールバック関数——onConstruct onStart、onEnd

• 複数の構成可能なオプション

• 画像の遅延読み込み

• 自動的に回転

• 簡単extend

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

りー

html

りー

jquery slide anoSlide title

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 中国語 Web サイトの他の関連記事を参照してください。