用代码的力量，打造炫酷轮播图

2023-02-05 14:13:58

用 JavaScript 和 CSS 实现炫酷的轮播图

准备踏上交互式轮播图的制作之旅了吗？让我们携手深入探讨如何利用 JavaScript 和 CSS 创造出引人入胜的视觉盛宴。

CSS 的 transform 属性中的 translate()

就像一位神奇的魔术师，CSS 的 transform 属性拥有操纵元素位置的超能力，而 translate() 函数就是它的秘密武器。它能将元素在水平或垂直方向上平移，就像舞台上的演员变换位置一样。

在轮播图中，translate() 函数可以轻松实现图片的滑动效果。给图片元素添加一个类名，然后在 CSS 中使用 transform 属性设置其初始位置。例如：

.image-container {
  transform: translateX(0px);
}

这个代码使图片向右移动 0 像素，为接下来的滑动变幻做好准备。

JavaScript 的 setInterval() 函数

现在，是时候让轮播图动起来啦！JavaScript 的 setInterval() 函数扮演着定时器的角色，每隔一段时间就会自动执行特定的代码。在我们的轮播图中，它负责图片的自动播放。

示例代码：

var interval = setInterval(function() {
  var currentPosition = parseInt($('.image-container').css('transform').replace('translateX(', '').replace('px)', ''));
  $('.image-container').css('transform', 'translateX(' + (currentPosition - 600) + 'px)');
}, 3000);

每隔 3 秒，图片就会向右移动 600 像素，犹如在舞台上翩翩起舞。

鼠标悬停时的暂停播放

为了让轮播图更具交互性，我们可以让它在鼠标悬停时暂停播放。就像是舞台灯光随着观众的注目而变化，轮播图也可以根据用户的行为做出调整。

$('.image-container').hover(function() {
  clearInterval(interval);
}, function() {
  interval = setInterval(function() {
    var currentPosition = parseInt($('.image-container').css('transform').replace('translateX(', '').replace('px)', ''));
    $('.image-container').css('transform', 'translateX(' + (currentPosition - 600) + 'px)');
  }, 3000);
});

当鼠标悬停在轮播图上时，计时器将暂停，图片停止移动，让用户可以仔细欣赏当前的精彩瞬间。

鼠标点击时的图片切换

想要让用户掌控轮播图的节奏吗？为其添加点击切换功能！就像指挥家引导乐团演奏，用户可以通过点击导航按钮切换图片。

$('.image-nav li').click(function() {
  var index = $(this).index();
  var currentPosition = parseInt($('.image-container').css('transform').replace('translateX(', '').replace('px)', ''));
  $('.image-container').css('transform', 'translateX(' + (currentPosition - (600 * index)) + 'px)');
});