javascript轮播图怎么做-前端问答-PHP中文网

javascript轮播图怎么做

王林

发布： 2023-05-09 09:22:06

原创

1048人浏览过

javascript轮播图怎么做？

随着Web前端开发的发展，轮播图已成为了大多数网站和应用的常用组件之一。然而，相信有不少刚接触前端开发的小伙伴会问，JavaScript轮播图怎么做呢？

这篇文章将向大家介绍如何使用JavaScript制作轮播图，帮助大家逐步了解实现轮播图的基本原理和常见技术。

一、轮播图的基本原理

轮播图，顾名思义就是能够循环播放的一组图片，它通过JavaScript实现自动循环或手动切换，让用户可以以此浏览多张图片或内容。

立即学习“Java免费学习笔记（深入）”；

轮播图的基本原理分为两个部分：HTML结构和JavaScript逻辑。

HTML结构：

HTML结构是轮播图的基础，其结构大致如下：

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item">@@##@@</li>
    <li class="carousel-item">@@##@@</li>
    <li class="carousel-item">@@##@@</li>
    <li class="carousel-item">@@##@@</li>
    <li class="carousel-item">@@##@@</li>
  </ul>
</div>

登录后复制

其中，.carousel 是轮播图的容器，.carousel-list 是图片列表容器，.carousel-item 是每个单独图片的容器。

JavaScript逻辑：

JavaScript逻辑实现轮播图的核心，通常采用以下方式：

1、获取轮播图页面元素，用 JavaScript 代码选中 HTML 中的 .carousel 元素。

var carousel = document.querySelector('.carousel');

登录后复制

2、获取图片列表容器和单独图片容器，

var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');

登录后复制

3、获取轮播图图片的宽度，

var itemWidth = items[0].offsetWidth;

登录后复制

4、配置切换间隔时间和定时器，

var delay = 3000;
var interval;

登录后复制

5、配置自动播放和手动切换，

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

function stopCarousel() {
    clearInterval(interval);
}

登录后复制

二、实现简单轮播图

现在，我们已经了解了轮播图的基本原理，并通过代码来实现了轮播图的基本效果。下面，我们将基于这一效果来实现一个简单的轮播图。

HTML结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Carousel</title>  
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="carousel">
      <ul class="carousel-list">
        <li class="carousel-item">@@##@@</li>
        <li class="carousel-item">@@##@@</li>
        <li class="carousel-item">@@##@@</li>
        <li class="carousel-item">@@##@@</li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

登录后复制

JavaScript代码：

var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth; 
var delay = 3000;
var interval;

// 自动播放
function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

// 手动切换
function stopCarousel() {
    clearInterval(interval);
}

// 启动轮播
startCarousel();

登录后复制

CSS代码：

.carousel {
  position: relative;
  overflow: hidden;
  width: 400px;           /* 轮播图容器的宽度 */
  height: 300px;          /* 轮播图容器的高度 */
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
}
.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

登录后复制

三、实现多种效果的轮播图

通过上面的例子，我们已经学会了如何制作一个简单的轮播图。但是，通常轮播图不仅仅只有以上的效果，我们还可以通过 JavaScript 实现更多实用的轮播图效果。

1、缓动效果

缓动效果就是让每张图片切换时速度由快到慢的效果。通过使用JavaScript通常我们可以像这样写：

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        var startTime = Date.now();
        var easing = function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        };
        var animate = function() {
            var time = Date.now() - startTime;
            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
            if(time <= delay) {
                list.style.left = easingLeft + 'px';
                requestAnimationFrame(animate);
            } else {
                list.style.left = -itemWidth + 'px';
                list.appendChild(items[0]);
            }
        };
        requestAnimationFrame(animate);
    }, delay);
}

登录后复制

2、响应式布局

响应Web设计是现代前端设计的常识，为了使轮播图能够支持不同的屏幕尺寸，更好地适应Web布局，我们需要做些额外的调整和优化。

/* 以vw为基准 */
.carousel {
  position: relative;
  overflow: hidden;
  width: 80vw;         /* 轮播图容器的宽度 */
  height: calc(40vw);  /* 轮播图容器的高度 */
}

/* 以persent为基准 */
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
  top: 0;
  left: 0;
  transition: left .3s;
}

.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
  height: 100%;
}

/* 调整图片大小 */
.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

登录后复制

其中，vw 单位可以指定长度为视口的宽度的百分比，且无论屏幕尺寸如何变化，轮播图都会保持响应式布局。

四、总结

至此，我们已经了解了通过JavaScript制作轮播图的基本原理和实现方法。通过调整和优化，我们可以实现更多样式和效果丰富的轮播图组件，从而很好地满足用户对Web内容和服务的需求。

当然，JavaScript制作轮播图还有很多技术难点和操作细节需要掌握，希望大家在实际开发中能够逐渐掌握这些技能，并不断提高自己的编程能力。