創(chuàng)建具有不透明度或滑動(dòng)效果的簡單 jQuery 圖像滑塊

雖然使用預(yù)構(gòu)建的插件很方便，但它們也可能添加不必要的權(quán)重并引入與現(xiàn)有代碼的潛在沖突。本文演示了如何從頭開始創(chuàng)建一個(gè)簡單且可自定義的 jQuery 圖像滑塊。

jQuery 基礎(chǔ)知識(shí)

在繼續(xù)之前，了解兩個(gè)關(guān)鍵的 jQuery 函數(shù)非常重要：

• index() 返回 jQuery 對象中第一個(gè)元素相對于其的位置
• eq() 根據(jù)索引值選擇元素。

滑塊效果

此滑塊支持不透明度和滑動(dòng)效果：

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?；瑒?dòng)效果

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 響應(yīng)

觸發(fā)器、點(diǎn)擊事件和計(jì)時(shí)：

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);
}

這個(gè)完整的解決方案允許自定義滑塊的外觀和功能以滿足特定需求。不透明度和滑動(dòng)效果可以輕松互換以創(chuàng)建不同的外觀。此外，滑塊可以通過觸發(fā)器、下一個(gè)/上一個(gè)按鈕進(jìn)行控制，甚至可以通過計(jì)時(shí)功能實(shí)現(xiàn)自動(dòng)化。

以上是如何構(gòu)建具有淡入淡出或滑動(dòng)效果的簡單 jQuery 圖像滑塊？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！