フェード効果またはスライド効果を備えたシンプルな jQuery 画像スライダーを作成する方法

不透明度またはスライド効果を備えたシンプルな jQuery 画像スライダーの作成

事前に構築されたプラグインを使用すると便利ですが、不要なプラグインを追加することもできます重み付けを行い、既存のコードとの潜在的な競合を引き起こします。この記事では、シンプルでカスタマイズ可能な jQuery 画像スライダーを最初から作成する方法を説明します。

jQuery の基本

次に進む前に、次の 2 つの主要な jQuery 関数を理解することが重要です。

• index() は、jQuery オブジェクトの最初の要素の相対的な位置を返します。兄弟。
• eq() は、インデックス値に基づいて要素を選択します。

スライダー効果

このスライダーは、不透明度とスライドの両方をサポートします。効果:

1.フェードイン/フェードアウト効果

HTML:

<ul class="images">
  <li>
    <img src="images/1.jpg" alt="1" />
  </li>
  <li>
    <img src="images/2.jpg" alt="2" />
  </li>
  ...
</ul>

<ul class="triggers">
  <li>1</li>
  <li>2</li>
  ...
</ul>

CS S:

ul.images {
  position: relative;
}
ul.images li {
  position: absolute;
}

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
  images.fadeOut(300).eq(target).fadeIn(300);
  triggers.removeClass('active').eq(target).addClass('active');
}

2.スライド効果

HTML: フェードイン/フェードアウトと同じ効果

CSS:

.mask {
  float: left;
  margin: 40px;
  width: 270px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
/* This width must be the total width of the images, calculated with jQuery. */
ul.images li {
  float: left;
}

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth * (lastElem + 1) + 'px');

function sliderResponse(target) {
  mask.stop(true, false).animate({ 'left': '-' + imgWidth * target + 'px' }, 300);
  triggers.removeClass('active').eq(target).addClass('active');
}

共通 jQuery レスポンス

トリガー、クリックイベント、およびタイミング:

triggers.click(function() {
  if (!$(this).hasClass('active')) {
    target = $(this).index();
    sliderResponse(target);
    resetTiming();
  }
});

$('.next').click(function() {
  target = $('ul.triggers li.active').index();
  target === lastElem ? target = 0 : target = target + 1;
  sliderResponse(target);
  resetTiming();
});

$('.prev').click(function() {
  target = $('ul.triggers li.active').index();
  lastElem = triggers.length - 1;
  target === 0 ? target = lastElem : target = target - 1;
  sliderResponse(target);
  resetTiming();
});

function sliderTiming() {
  target = $('ul.triggers li.active').index();
  target === lastElem ? target = 0 : target = target + 1;
  sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); }, 5000);

function resetTiming() {
  clearInterval(timingRun);
  timingRun = setInterval(function() { sliderTiming(); }, 5000);
}

この完全なソリューションにより、特定のニーズに合わせてスライダーの外観と機能をカスタマイズできます。不透明度とスライド効果を簡単に交換して、さまざまな外観を作成できます。さらに、スライダーはトリガー、次/前ボタンで制御でき、タイミング機能で自動化することもできます。

以上がフェード効果またはスライド効果を備えたシンプルな jQuery 画像スライダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。