如何构建具有淡入淡出或滑动效果的简单 jQuery 图像滑块？-css教程-PHP中文网

如何构建具有淡入淡出或滑动效果的简单 jQuery 图像滑块？

Linda Hamilton

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

原创

384 人浏览过

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中文网其他相关文章！