如何建立具有淡入淡出或滑動效果的簡單 jQuery 映像滑桿？-css教學-PHP中文網

如何建立具有淡入淡出或滑動效果的簡單 jQuery 映像滑桿？

Linda Hamilton

發布： 2024-12-07 07:13:18

原創

382 人瀏覽過

How to Build a Simple jQuery Image Slider with Fade or Slide Effects?

創建具有不透明度或滑動效果的簡單jQuery 圖像滑桿

雖然使用預先建構的插件很方便，但它們也可能增加不必要的權重並引入與現有程式碼的潛在衝突。本文示範如何從頭開始建立一個簡單且可自訂的 jQuery 映像滑桿。

jQuery 基礎知識

在繼續之前，了解兩個關鍵的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中文網其他相關文章！