利用 CSS3 实现的无缝轮播功能代码

我来详细讲解利用 CSS3 实现的无缝轮播功能代码的完整攻略：

1. 准备工作

1.1 HTML 结构

首先，我们需要准备好需要轮播的图片以及用于显示轮播图片的 HTML 结构。通常情况下，我们会使用 ul 和 li 标签创建图片列表。例如：

<div class="slider">
  <ul>
    <li><img src="image1.jpg" alt="image1"></li>
    <li><img src="image2.jpg" alt="image2"></li>
    <li><img src="image3.jpg" alt="image3"></li>
    <!-- more images -->
  </ul>
</div>

1.2 CSS 样式

接下来，我们需要给图片列表和图片设置样式。例如，我们需要将图片列表设置为横向排列并隐藏溢出部分，为图片设置宽度和高度，以及使图片水平居中等。例如：

.slider {
  width: 100%;
  overflow: hidden;
}
.slider ul {
  list-style: none;
  display: flex;
  width: 300%; /* 将图片总宽度设置为 300% */
  animation: slide 10s linear infinite; /* 添加动画效果 */
}
.slider li {
  width: 33.33%; /* 将每张图片的宽度设置为图片列表总宽度的 1/3 */
  height: 200px;
  text-align: center; /* 让图片水平居中 */
}
.slider li img {
  max-width: 100%;
  max-height: 100%;
}

在上面的代码中，我们定义了一个名为 .slider 的 CSS 类，它用于包装图片列表，让我们可以控制轮播效果。同时，我们还定义了一个名为 slide 的动画效果，将在下一步的内容中进一步讲解。

2. 利用 CSS3 实现的无缝轮播功能

要实现无缝轮播功能，我们需要使用 CSS3 的 animation 属性来定义动画效果，并使用 transform 属性来平滑地移动图片。下面是实现无缝轮播功能的完整 CSS 代码：

.slider ul {
  list-style: none;
  display: flex;
  width: 300%; /* 将图片总宽度设置为 300% */
  animation: slide 10s linear infinite; /* 添加动画效果 */
}

@keyframes slide {
  0% {
    transform: translateX(0%); /* 从 0% 的位置开始移动 */
  }
  33.33% {
    transform: translateX(-100%); /* 移动到第 2 张图片 */
  }
  66.66% {
    transform: translateX(-200%); /* 移动到第 3 张图片 */
  }
  100% {
    transform: translateX(0%); /* 回到第 1 张图片 */
  }
}

在上面的代码中，我们使用了 keyframes 关键字定义了一个名为 slide 的动画效果。在 slide 动画中，我们使用了 transform 属性来平滑地移动图片。其中，translateX 函数用于在水平方向上移动图片， -100% 表示向左移动一个图片的宽度， -200% 表示向左移动两个图片的宽度。

最后，我们将 slide 动画应用到图片列表上，并设置动画的持续时间为 10s，使图片在 10s 的时间内完成一个轮播循环。由于设置了 infinite 参数，所以这个轮播循环将一直持续下去，直到页面被关闭。

3. 示例说明

3.1 示例一

下面是一个简单的无缝轮播示例。我们使用了 4 张图片来进行轮播，并设置了轮播间隔为 3s。同时，我们还添加了左右箭头和圆点指示器来让用户可以手动控制轮播。

<div class="slider">
  <ul>
    <li><img src="image1.jpg" alt="image1"></li>
    <li><img src="image2.jpg" alt="image2"></li>
    <li><img src="image3.jpg" alt="image3"></li>
    <li><img src="image4.jpg" alt="image4"></li>
  </ul>
  <div class="arrows">
    <a href="#" class="prev">&lt;</a>
    <a href="#" class="next">&gt;</a>
  </div>
  <div class="dots">
    <a href="#" class="dot active"></a>
    <a href="#" class="dot"></a>
    <a href="#" class="dot"></a>
    <a href="#" class="dot"></a>
  </div>
</div>

<style>
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slider ul {
  list-style: none;
  display: flex;
  width: 400%;
  animation: slide 12s linear infinite;
}
.slider li {
  width: 25%;
  height: 100%;
  text-align: center;
}
.slider li img {
  height: 100%;
  max-width: 100%;
}
.arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: #fff;
  text-decoration: none;
}
.arrows a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease-in-out;
}
.arrows a:hover {
  background: rgba(0, 0, 0, 0.8);
}
.prev {
  left: 20px;
}
.next {
  right: 20px;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  background: rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease-in-out;
}
.dot.active {
  background: rgba(0, 0, 0, 0.8);
}
</style>

<script>
var slider = document.querySelector('.slider');
var prev = slider.querySelector('.prev');
var next = slider.querySelector('.next');
var dots = slider.querySelectorAll('.dot');
var ul = slider.querySelector('ul');
var li = slider.querySelectorAll('li');
var index = 1;
var len = li.length;
var interval = 3000;
var timer;

// 上一张图片
function prevImage() {
  index--;
  if (index < 1) {
    index = len - 2;
    ul.style.transition = 'none';
    ul.style.transform = 'translateX(-' + (len - 1) * 25 + '%)';
  }
  setTimeout(() => {
    ul.style.transition = 'transform 0.5s ease-in-out';
    ul.style.transform = 'translateX(-' + (index - 1) * 25 + '%)';
    setActiveDot();
  }, 0);
}

// 下一张图片
function nextImage() {
  index++;
  if (index >= len - 1) {
    index = 1;
    ul.style.transition = 'none';
    ul.style.transform = 'translateX(0)';
  }
  setTimeout(() => {
    ul.style.transition = 'transform 0.5s ease-in-out';
    ul.style.transform = 'translateX(-' + (index - 1) * 25 + '%)';
    setActiveDot();
  }, 0);
}

// 设置当前激活的圆点
function setActiveDot() {
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  dots[index - 1].classList.add('active');
}

// 自动轮播
function autoPlay() {
  timer = setInterval(nextImage, interval);
}

autoPlay();

prev.addEventListener('click', function(e) {
  e.preventDefault();
  clearInterval(timer);
  prevImage();
  autoPlay();
});

next.addEventListener('click', function(e) {
  e.preventDefault();
  clearInterval(timer);
  nextImage();
  autoPlay();
});

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', function(e) {
    e.preventDefault();
    clearInterval(timer);
    index = Array.from(dots).indexOf(e.target) + 1;
    ul.style.transition = 'transform 0.5s ease-in-out';
    ul.style.transform = 'translateX(-' + (index - 1) * 25 + '%)';
    setActiveDot();
    autoPlay();
  });
}
</script>

在上面的示例中，我们首先定义了一个包含 4 张图片的图片列表，它的 HTML 结构如下：

<div class="slider">
  <ul>
    <li><img src="image1.jpg" alt="image1"></li>
    <li><img src="image2.jpg" alt="image2"></li>
    <li><img src="image3.jpg" alt="image3"></li>
    <li><img src="image4.jpg" alt="image4"></li>
  </ul>
  <!-- arrows and dots -->
</div>

接着，我们使用 CSS3 的 animation 属性定义了一个名为 slide 的动画效果，并应用到了图片列表上。动画效果使用了 translateX 函数来平滑地移动图片，实现了无缝轮播的效果。

在示例中，我们还添加了左右箭头和圆点指示器来让用户可以手动控制轮播。在 JavaScript 代码中，我们为左右箭头和圆点指示器添加了点击事件处理程序，用于控制图片列表的移动和圆点指示器的激活状态。同时，我们还使用了 setInterval 函数来控制轮播间隔。

在上面的示例中，我们使用了比较简单的逻辑来控制图片的移动。如果达到了列表的边界，我们需要切换到第 1 或最后 1 张图片继续播放。具体来说，如果当前图片是第 1 张，则我们需要将图片列表移动到第 4 张，然后使用 translateX 函数将图片第 1 张移动到可视区域。如果当前图片是最后 1 张，则我们需要将图片列表移动到第 1 张，然后使用 translateX 函数将图片第 2 张移动到可视区域。

3.2 示例二

除了使用左右箭头和圆点指示器来控制轮播，我们还可以利用鼠标悬停事件来暂停轮播。下面是一个带有鼠标悬停暂停轮播功能的无缝轮播示例。

<div class="slider">
  <ul>
    <li><img src="image1.jpg" alt="image1"></li>
    <li><img src="image2.jpg" alt="image2"></li>
    <li><img src="image3.jpg" alt="image3"></li>
    <li><img src="image4.jpg" alt="image4"></li>
  </ul>
</div>

<style>
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slider ul {
  list-style: none;
  display: flex;
  width: 400%;
  animation: slide 12s linear infinite;
}
.slider li {
  width: 25%;
  height: 100%;
  text-align: center;
}
.slider li img {
  height: 100%;
  max-width: 100%;
}
.slider:hover ul {
  animation-play-state: paused;
}
</style>

在上面的示例中，我们使用了 CSS3 的 animation-play-state 属性来控制动画的播放状态。如果鼠标悬停在图片列表上，则我们将 animation-play-state 设置为 paused，使动画停止播放。如果鼠标移出图片列表，则动画继续播放。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用 CSS3 实现的无缝轮播功能代码 - Python技术站